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);},
},