使用命名空间模块中的 mapState 和 mapMutations答案

【问题标题】：Using mapState and mapMutations from a namespaced module使用命名空间模块中的 mapState 和 mapMutations
【发布时间】：2020-10-05 19:02:02
【问题描述】：

在将我的 vuex 存储拆分为三个模块后，我无法弄清楚如何访问突变和状态。我尝试了不同的语法，但我不确定要遵循什么。

地图状态： 这就是我设置 mapStates 的方式，vendor 和 root 是模块名称。

...mapState({
  vendor: state => state.vendor.vendor,
  language: state => state.root.language
})

并像这样使用它：

console.log(this.vendor);

MapMutations： 我想我已经正确设置了 mapMutations。

methods: {
  ...mapMutations('vendor', ['UPDATE_VENDOR', 'SET_VENDOR_APISTATE'])
}

并像这样访问它：

this.$store.commit('UPDATE_VENDOR', response.data);

或

this.UPDATE_VENDOR(response.data);

这些似乎都不适合我，我无法弄清楚我做错了什么。

我的商店是这样的：

import vendorModule from './vendor/vendorModule';

const store = new Vuex.Store({
  modules: {
    customer: customerModule,
    root: rootModule,
    vendor: vendorModule
  }
});

使用这样的模块：

const vendorModule = {
  namespaced: true,
  state: () => ({
    vendor: null,
    vendorApiState: ENUM.INIT
  }),
  mutations: {
    UPDATE_VENDOR(state, vendor) {
      state.vendor = vendor;
      state.vendorApiState = ENUM.LOADED;
    }
  }
};

export default {
  vendorModule
};

编辑我意识到我的模块结构错误。正如 Kelvin Omereshone 所写，我在这里使用了错误的语法： this.$store.commit('vendor/UPDATE_VENDOR', response.data);.

工作模块结构为：

const state = () => ({
  vendor: null,
  vendorApiState: ENUM.INIT
});

const mutations = {
  UPDATE_VENDOR(state, vendor) {
    state.vendor = vendor;
    state.vendorApiState = ENUM.LOADED;
  }
};

export default {
  namespaced: true,
  state,
  mutations
};

【问题讨论】：

标签： javascript vue.js vuex vuex-modules

【解决方案1】：

如果你想使用this.$store.commit('UPDATE_VENDOR', response.data);。不需要mapMutations。像这样使用它：

this.$store.commit('vendor/UPDATE_VENDOR', response.data);

注意：模块名称位于 Mutation 名称之前，由正斜杠分隔 /

【讨论】：

我收到错误 [vuex] unknown mutation type: vendor/UPDATE_VENDOR。你会碰巧知道为什么会这样吗？
请检查模块名称是否确实为vendor，突变名称是否确实为UPDATE_VENDOR，并且您在其上设置了namespaced: true。
是的，它们似乎都是正确的。我觉得我的模块可能结构错误或类似的东西。
是的，看看你的代码，你的模块状态应该是一个返回对象的函数。尝试遵循这个。 vuex.vuejs.org/guide/modules.html。如果你需要什么，我在这里。
我通过将模块的内容直接移动到 my store.js 中来使其工作，但这有点违背了拆分代码的目的。当我将它们放在单独的文件中时，似乎我做错了什么。我用模块的其余部分（导出）更新了我的问题，并修复了状态应该是一个函数。在我看来它是正确的，但显然不是。