详解vuex状态管理模式

四、vuex的核心概念之mutations与actions

我们可以吧mutations理解成一个事件函数，而actions就是触发器，通过actions，发起动作。

简单实例代码如下。

 mutations:{
     setToken(state,n){
      state.token=state.token+n;
     }
    },
    actions:{
     setToken({commit},n){
      commit('setToken',n)
     }
    }

在组件中的使用，同getters的用法，代码如下

import {mapGetters,mapActions} from 'vuex'
export default {
 name: 'app',
 components: {
  HelloWorld
 },
 computed:{
  ...mapGetters(["getToken"])
 },
 mounted() {
  console.log(this)
  console.log(this.setToken(1))
  console.log(this.getToken)
 },methods:{
    ...mapActions(["setToken"])
 },

在vue的json中，同样可以找到相同的属性。

五、vuex核心概念之mudules

vuex允许我们将store分为不同的模块，每个单独的模块具备getters，state，mutations，actions这四个store核心，

需要注意的是如果在模块内部加入了namesapced：true这一个属性。在取值的时候需要做一点细微的变动，通过mapGetters火mapActions映射时需要将模块名作为路劲，来获得该模块的getters，和actions，模块化代码如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const moduleA = {
 namespaced:true,
 state: { a:1 },
 mutations: { },
 actions: { },
 getters: { geta(state){
  return state.a;
 } }
}
const moduleB = {
 namespaced:true,
 state: { b:1},
 mutations: { },
 actions: {}
}
const store = new Vuex.Store({ 
  state: {
   token: 0
  },
  getters:{
    getToken(state){
     return state.token;
    },
  } , mutations:{
   setToken(state,n){
     state.token=state.token+n;
   }
  },
  actions:{
   setToken({commit},n){
    commit('setToken',n)
   }
  },
  modules: {
   a: moduleA,
   b: moduleB
  },
 })
 export default store;

在组件中获得模块A的值得时候，我们来看一下geta这个getters属性，在vue中的状态，如图所示

geta为模块a下得getters属性，在获取的时候就需要这样

 computed:{
  // ...mapGetters(["getToken"])
  ...mapGetters("a",["geta"])
 },
 mounted() {
								 
 2/3   首页 上一页 1 2 3 下一页 尾页