Vuex名称空间存储设置两种状态

Question

在我的项目中，我有一个相当复杂的vuex存储，它保存过滤器输入的值并将它们转换为过滤器，我可以使用它们稍后查询后端。我在两个不同的表旁使用这些过滤器。如果我在table1中过滤id = 123，我不希望在table2中过滤id = 123。这就是为什么我创建了一个模块，并尝试使用命名空间存储。我的vuex store index.js看起来像这样:

import myFilterModule from './filter.module';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
filter1: myFilterModule,
filter2: myFilterModule,
},
});

我的模块是这样的:

const state = {
idFilter: null,
};
const actions = {};
const mutations = {
[SET_ID_FILTER](state, id) {
state.idFilter = id;
},
};
const getters = {
getFilter(state) {
return state.idFilter;
},
};
export default {
namespaced: true,
state: () => state,
actions,
mutations,
getters,
};

问题是，如果我在这些命名空间中的任何一个上提交更改，像这样:

this.$store.commit('filter1/' + SET_ID_FILTER, '123');

这两个函数:

this.$store.state['filter1'].idFilter
this.$store.state['filter2'].idFilter

返回相同的值。即使我甚至没有设置。

我是否使用了错误的命名空间?

Answer 1

问题是状态在两个模块副本中是相同的对象。如果一个模块应该被重用，初始状态应该用工厂函数创建:

const state = () => ({
idFilter: null,
});
...
export default {
namespaced: true,
state,
...
};

这就是为什么state被允许是一个函数的原因。