Question

将vuex存储分为三个模块后，我不知道如何访问突变和状态。我尝试了不同的语法，但不确定该怎么做。

地图状态： 这就是我设置mapStates的方式，供应商和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
};

Answer 1

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

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

注意：模块名称位于“ Mutation”名称之前，并以正斜杠/

隔开

使用命名空间模块中的mapStates和mapMutations

1 个答案: