Vuex 이름 지정 저장소 집합 두 상태

Vuex 이름 지정 저장소 집합 두 상태

제 프로젝트에는 필터 입력 값을 저장하고 나중에 백엔드를 쿼리하는 데 사용할 수 있는 필터로 변환하는 복잡한 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

똑같이 돌려주세요.심지어 내가 세팅하지도 않은 것도.filter2 위의 idFilter.

제가 네임스페이스를 잘못 사용하고 있나요?

문제는 상태가 양쪽 모듈복사본에서 같은 오브젝트라는 것입니다.모듈을 재사용해야 할 경우 공장 출하 시 기능을 사용하여 초기 상태를 생성해야 합니다.

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

이래서state함수가 될 수 있습니다.

언급URL : https://stackoverflow.com/questions/69619945/vuex-namespaced-store-sets-both-states