15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 vue/vuex

vue中vuex的详解

梁鹏翱| 发布于 2021-11-11 17:21:46| 520阅读| 0点赞| 0评论
举报

vuex

概念

  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

安装

  1. HTML 中使用 script 标签引入
    <script src="vue.js">script>
    <script src="vuex.js">scrip
  2. Vue项目中使用 npm 下载安装(需要安装 Node 环境)
    // 下载
    npm install vuex --save
    
    // 安装
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    

Vuex 图示

Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
  2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
Store
        每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应    用中大部分的状态 (state)。
State
       驱动应用的数据源,用于保存所有组件的公共数据.
Getter
      可以将 getter 理解为 store 的计算属性, getters 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
Mutation
      mutations 对象中保存着更改数据的回调函数,该函数名官方规定叫 type, 第一个参数是 state, 第二参数是payload, 也就是自定义的参数。mutation 必须是同步函数。mutations 对象里的方法需要使用 store.commit 调用
Action
      Action 提交的是 mutation 而不是直接变更状态。action 可以包含任意异步操作。actions 对象里的方法需要使用 store.dispatch 调用。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
Module
     由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

HTML中 vuex 的使用

<body>
<div id="app">
    <input type="button" value="+" @click="add">
    {{this.$store.state.count}}
    <input type="button" value="-" @click="reduce">
    {{this.$store.getters.synchro}}
    <input type="button" value="改变为10" @click="changeNum">
div>
<script src="vue.js">script>
<script src="vuex.js">script>
<script>
    var store = new Vuex.Store({
        state: {
            count: 0
        },
        getters: {
            synchro(state) {
                return state.count
            }
        },
        mutations: {   
            increment(state) {
                state.count++
            },
            inreduce(state) {
                state.count--
            },
            inchange(state, num) {
                state.count = num
            }
        },
        actions: {
            change(context, num) {
                context.commit('inchange', num)
            }
        }
    })

    new Vue({
        el: '#app',
        store,
        methods: {
            add() {
                this.$store.commit('increment')
            },
            reduce() {
                this.$store.commit('inreduce')
            },
            changeNum() {
                this.$store.dispatch('change', 10)
            }
        }
    })
script>
body>

Vue 项目中 vuex 的使用(两种)

  1. 把 vuex 写在 main.js 文件里
    import Vue from 'vue'
    import app from './app'
    import router from './router'
    import Vuex from 'vuex'
    
    // 全局状态管理
    Vue.use(Vuex)
    
    Vue.config.productionTip = false
    
    var store = new Vuex.Store({
      state: {
        num: 0
      },
      mutations: {
        changeNum(state, num){
          state.num += num
        }
      }
    })
    
    new Vue({
      el: '#app',
      store,
      router,
      components: { app },
      template: ''
    })
    

在组件中调用

<template>
	<div>
		<input type="button" value="改变count的值" @click="change">
    	{{this.$store.state.count}}
	<div>
template>
<script>
export default {
	name: '',
	data () {
    	return {
		}
    },
    methods: {
		change() {
			this.$store.commit('changeNum', 10)
		}
	}
}
script>2

2.把vuex分离出来
 在 src 目录下创建一个 vuex 目录,新建 modules 目录 和 index.js 文件 放到 vuex 目录下
  在 main.js 文件里引入 vuex 目录
import Vue from 'vue'
import app from './app'
import router from './router'
import store from './vuex'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { app },
  template: ''
})

在 index.js 里写上如下代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let modules = {}

const requireAllModules = require.context("./", true, /\.js$/)

requireAllModules.keys().forEach(key => {
  let module = requireAllModules(key).default
  if (module && module.name && module.namespaced) {
    modules[module.name] = module
  }
})

export default new Vuex.Store({
  modules: modules,
  strict: process.env.NODE_ENV !== "production"
})

在 modules 目录下 新建 city.js 文件,里面代码如下

export default {
  name: "city",
  namespaced: true,
  state: {
    cityName: '',
    cityCode: ''
  },
  getters: {
    getState(state) {
      return state
    },
    getCityCode(state) {
      return state.cityCode
    }
  },
  mutations: {
    changeCity(state, cityName) {
      state.cityName = cityName
    }
  }
}

 在组件里设置值

<template>
	<div>
		<ul>
          <li v-for="item in city" @click="handChangeCity(item.name)">li>
        ul>
	div>
template>
<script>
import { mapMutations } from 'vuex'   // 引入vuex
export default {
	name: "city",
	data() {
		return {
			city: [
				{ id: 1, name: '北京' }
				{ id: 2, name: '上海' }
				{ id: 3, name: '广州' }
				{ id: 4, name: '深圳' }
				{ id: 5, name: '厦门' }
			]
		}
	},
	methods: {
		// 修改
		...mapMutations({
			changeCity: "city/changeCity"
		}),
		// 第一种写法
		handChangeCity(cityName) {
			this.changeCity(cityName)
		}
		// 第二种写法  不需要使用 ...mapMutations
		handChangeCity(cityName) {
			this.$store.commit('city/changeCity', cityName);
		}
	}
}
script>

 在另一个组件里使用

<template>
	<div>
		<div>{{getState.cityName}}div>
		<div>{{getCityCode}}div>
	div>
template>
<script>
import { mapGetters} from 'vuex'   // 引入vuex
export default {
	data() {
		return {
		}
	},
	computed: {
	    // 第一种使用方法
	    ...mapGetters({
	    	getState: "city/getState"
	    })
	    // 第二种使用方法
	    ...mapGetters('city', ['getState', 'getCityCode'])
  	}
}
script>
0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

梁鹏翱
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部