如何访问Vuex模块的mutations？多模块Store访问方法咨询

嘿，我来帮你搞定这个问题！你已经成功访问到模块的state了，那模块里的mutations其实分两种情况来调用，取决于你有没有给模块开启命名空间：

一、模块未开启命名空间（默认情况） #

如果你的模块里没设置namespaced: true，那模块中的mutations会被注册到Vuex的全局命名空间里。这时候调用方式和全局mutations完全一样，直接用commit加上mutation的名字就行：

// 调用listingModule里的某个mutation
this.$store.commit('yourMutationName')

⚠️ 注意：这种方式如果多个模块有同名的mutation，会导致调用时触发所有同名的mutation，很容易出问题，所以非常建议给每个模块开启命名空间！

二、模块开启命名空间（推荐用法） #

给每个模块加上namespaced: true，这是Vuex多模块开发的最佳实践，能避免命名冲突，也让逻辑更清晰。

1. 直接通过命名空间路径调用 #

用模块名/mutation名的格式作为commit的第一个参数：

// 调用listingModule里的updateListing mutation
this.$store.commit('listingModule/updateListing', payload)

2. 使用mapMutations辅助函数简化调用 #

可以借助Vuex提供的mapMutations辅助函数，把模块里的mutations映射到组件的methods中，写法更简洁：

import { mapMutations } from 'vuex'

export default {
  methods: {
    // 映射单个模块的mutations
    ...mapMutations('listingModule', [
      'updateListing' // 这样就能直接用 this.updateListing(payload) 调用了
    ]),
    
    // 或者还可以给mutation起别名
    ...mapMutations('listingModule', {
      update: 'updateListing' // 映射 this.update(payload) 为 this.$store.commit('listingModule/updateListing')
    })
  }
}

最后补个模块示例 #

给你看个完整的模块配置，记得加上namespaced: true：

// listingModule.js
export default {
  namespaced: true,
  state: {
    listings: []
  },
  mutations: {
    updateListing(state, newListing) {
      state.listings.push(newListing)
    }
  },
  getters: {
    activeListings(state) {
      return state.listings.filter(item => item.status === 'active')
    }
  }
}

这样你就能轻松访问到各个模块里的mutations啦！

内容的提问来源于stack exchange，提问作者KasparTr