使用命名空间模块中的 mapState 和 mapMutations
Using mapState and mapMutations from a namespaced module
在将我的 vuex 存储分成三个模块后,我不知道如何访问突变和状态。我尝试了不同的语法,但不确定要遵循什么。
地图状态:
这就是我设置 mapStates 的方式,vendor 和 root 是模块名称。
...mapState({
vendor: state => state.vendor.vendor,
language: state => state.root.language
})
并像这样使用它:
console.log(this.vendor);
地图突变:
我想我已经正确设置了 mapMutations。
methods: {
...mapMutations('vendor', ['UPDATE_VENDOR', 'SET_VENDOR_APISTATE'])
}
并像这样访问它:
this.$store.commit('UPDATE_VENDOR', response.data);
或
this.UPDATE_VENDOR(response.data);
None 这些似乎对我有用,但我不知道我做错了什么。
我的店铺是这样的:
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
};
如果要使用this.$store.commit('UPDATE_VENDOR', response.data);
。不需要 mapMutations
。像这样使用它:
this.$store.commit('vendor/UPDATE_VENDOR', response.data);
注意:模块名称出现在由正斜杠分隔的 Mutation 名称之前 /
在将我的 vuex 存储分成三个模块后,我不知道如何访问突变和状态。我尝试了不同的语法,但不确定要遵循什么。
地图状态: 这就是我设置 mapStates 的方式,vendor 和 root 是模块名称。
...mapState({
vendor: state => state.vendor.vendor,
language: state => state.root.language
})
并像这样使用它:
console.log(this.vendor);
地图突变: 我想我已经正确设置了 mapMutations。
methods: {
...mapMutations('vendor', ['UPDATE_VENDOR', 'SET_VENDOR_APISTATE'])
}
并像这样访问它:
this.$store.commit('UPDATE_VENDOR', response.data);
或
this.UPDATE_VENDOR(response.data);
None 这些似乎对我有用,但我不知道我做错了什么。
我的店铺是这样的:
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
};
如果要使用this.$store.commit('UPDATE_VENDOR', response.data);
。不需要 mapMutations
。像这样使用它:
this.$store.commit('vendor/UPDATE_VENDOR', response.data);
注意:模块名称出现在由正斜杠分隔的 Mutation 名称之前 /