vuex 辅助函数

vuex 内部封装了四个辅助函数，分别用来对应 state，getters，mutations，actions 的操作。

辅助函数，就是语法糖。

导入辅助函数

组件中

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

mapState

mapState 用来导入 vuex 的 state 对象里的属性，vuex 的 state 对象里的属性一般导入进计算属性 computed 里当计算属性使用。

演示，导入 vuex 的 state 对象里的 msg 属性到 computed

state 对象如下

export default new Vuex.Store({
    state:{
            msg:'辅助函数',
          },
}

组件如下

computed: {
        ...mapState(['msg'])
}

组件相当于如下

computed: {
        msg:function(){
            return this.$store.state.msg
    }
}

mapGetters

mapGetters 用来导入 vuex 的 getters 对象里的方法，vuex 的 getters 对象里的方法一般导入进计算属性 computed 里当计算属性使用。

演示，导入 vuex 的 getters 对象里的 getName 方法到 computed 

getters 对象如下

getters: {
    getName:function(state){
        return '我是 getters 对象的 getName 方法'
    }
}

组件如下

computed:{
  ...mapGetters(['getName']),
}

相当于如下

computed:{
    getName:function(){
        return this.$store.getters.getName
    }
}

mapMutations

mapMutations 用来生成触发 vuex 的 mutations 对象里的方法的方法。

演示，在 methods 里生成触发 vuex 的 mutations 对象的 changeMsg 方法的方法

mutations 对象如下

mutations:{
    changeMsg:function(state,params){
        state.msg = params
    }
},

组件如下

methods: {
    ...mapMutations(["changeMsg"]),
},

组件相当如下

methods: {
    changeMsg:function(params) {
      this.$store.commit("changeMsg", params);
    },
},

mapActions

mapActions 用来生成触发 vuex 的 action 对象里的方法的方法。

演示，在 methods 里生成触发 vuex 的 action 对象的 asyncChangeMsg 方法的方法

action 对象如下

actions: {
  asyncChangeMsg:function(context){
            setTimeout(function(){
              // 1000 毫秒后触发 vuex 的 methods 对象里的 changeMsg 方法
              context.commit("changeMsg");
        }, 1000)
    }
}

组件如下

methods:{
  ...mapActions(['asyncChangeMsg'])
}

组件相当如下

methods: {
    asyncChangeMsg:function(params) {
        this.$store.dispatch("asyncChangeMsg", params);
    },
},