Vuex 状态管理器

vuex：状态管理器，多个组件可共用数据

有四个属性，都是对象结构

    Vue.use(Vuex);//调用vuex内部的install方法，把定义的store存在$store中，使每个组件都能通过$store调用到对应的属性和方法
export default new Vuex.Store({
    state:{
        a:1,//通过$store.state.a获取
        b:2
    },
    getters:{ //相当于computed属性，通过$store.getters.getterName()调用
        getterName(state){//参数是state
            return state+1
        }
    },
    mutations:{
        addAge(state,payload){ //通过commit来调用——this.$store.commit("addAge",10);第一个参数是mutations的名称，第二个参数是传递的载荷，可以是一个对象
          state.age += payload;
        }
    },
    actions:{//通过dispatch来调用
        addAgeAsync({commit},payload){
          commit("addAge",payload);
        }
    },
    modules:{
        
    }
});

若mutations内部的方法名重名，则会执行最后面的那个方法

如果是modules里面的mutations和根模块的mutations重名，则会依次执行

export default new Vuex.Store({
  modules:{
    a:{
      mutations:{
        addAge(state,payload){
          console.log("sss");
        }
      },
    }
  },
  state:{
    age:18
  },
  mutations:{
    addAge(state,payload){
      state.age += payload;
      console.log("sss1");
    },
    addAge(state,payload){
      state.age+=1;
      console.log("sss2");//只会执行后面的这个方法
    },
  }
})
//先输出sss2，再输出sss

Store的内部结构

如果有同名的方法，但是我掉这个方法的时候我只想执行某个模块下面的方法，可以给这个模块添加个命名空间namespaced：true

module A.js
export default {
    namespaced:true,//命名空间
    mutations:{
        fun1(){
            console.log("A模块");
        }
    }

}


module B.js
export default {
    namespaced:true,//命名空间
    mutations:{
        fun1(){
            console.log("B模块");
        }
    }

}


//调用
this.$store.commit("A/fun1");//A模块

vuex的辅助函数：mapActions,mapMutations,mapState

以mapActions作为例子

import {mapActions} from 'vuex'

//在有模块的情况下（还是用前面的A,B模块作为例子），调用mapActions都要在前面加上模块的名称，比较繁琐
import {createNamespacedHelpers} from 'vuex' //vuex提供的命名空间辅助函数
let {mapActions} = createNamespacedHelpers("home");//这样就可以直接调用mapActions(['fun2'])，而不用在加上命名空间了

export default {
  mounted(){
    //直接把模块中actions的方法添加到组件实例中，可以用this来调用
    this.setCategory();
   
  },
  methods:{
    //mapActions(['fun2'])返回来的是一个对象，要用扩展运算符展开
    ...mapActions('A',['fun2'])//有命名空间的写法，多个actions。mapActions(['fun2'，'fun3'])
  }
}

PS：如果模块加了命名空间，则一定要用模块名来调用，否则无法调用