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)
}
}组件如下文章来源：https://www.toymoban.com/news/detail-693737.html
methods:{
...mapActions(['asyncChangeMsg'])
}组件相当如下文章来源地址https://www.toymoban.com/news/detail-693737.html
methods: {
asyncChangeMsg:function(params) {
this.$store.dispatch("asyncChangeMsg", params);
},
},到了这里，关于vuex 辅助函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
