Vuex Namespaced Store 设置两种状态

Question

在我的项目中，我有一个相当复杂的 vuex 存储，它保存过滤器输入的值并将它们转换成我可以用来稍后查询后端的过滤器。我在两个不同的表格旁边使用这些过滤器。如果我在 table1 中过滤 id = 123，我不想让 table2 中的过滤器为 id = 123。这就是我创建模块并尝试使用命名空间存储的原因。我的 vuex 商店 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

Return一样。即使我什至没有设置。过滤器 2 上的 idFilter。

我使用的命名空间有误吗？

Answer 1

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

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

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

Vuex Namespaced Store 设置两种状态

Vuex Namespaced Store Sets Both States

namespaces

store

vue.js

vuex