Vuex: 서로 다른 모듈 내 공유 네스트 모듈(복제 없음)

Vuex: 서로 다른 모듈 내 공유 네스트 모듈(복제 없음)

Vuex를 스테이트 매니저로 하여 Vue.js 애플리케이션을 구축하고 있습니다.여러 가지 이유로 서로 다른 컴포넌트 간에 공유해야 하는 상태가 있기 때문에 두 개의 다른 모듈로 Import하기 위해 모든 공통 정보가 포함된 중첩 상태를 만들었습니다.

예를 들어, 내가 필요한 것은fileId다른 2개의 모듈에서는 다음과 같이 접근합니다.

// common file id store:
export default {
  state: {
    fileId: '',
  },
  actions: {
    setFileId({commit}, id) {
      commit('mutateFileId', id);
    },
  },
  mutations: {
    mutateId(state, id) {
      state.fileId = id;
    },
  },
};

다음으로 해당 모듈을 다른 모듈로 Import합니다.다음은 예를 제시하겠습니다.

// store 1 where I need the file id:
import fileIdModule from '@/store/modules/fileIdModule';

export default {
  modules: {
    fileIdModule,
  },
  actions: {
    whatEver({commit, dispatch}, param) {
      ...
      dispatch('setFileId', 1);
    },
  },
};

fileId가 아직 필요한 다른 스토어:

// store 2 where I need the file id:
import fileIdModule from '@/store/modules/fileIdModule';

export default {
  modules: {
    fileIdModule,
  },
  actions: {
    whatEver2({commit, dispatch}, param2) {
      ...
      dispatch('setFileId', 2);
    },
  },
};

제가 이렇게 하는 이유는 주로 그 정보가 2~3개의 스토어에서만 필요하고, 제 어플리케이션은 이미 8/9가 되었고, 앞으로 더 커질 것이기 때문입니다.

이 접근법의 문제는 같은 모듈을 2개의 다른 장소에서 Import하기 때문에 그 모듈에서 액션을 트리거하면 그 액션이 복제됩니다.또한 모듈을 3개의 다른 장소에서 Import하면 액션이 3회 실행되는 등...를 삽입하면 이를 증명하기 위해console.log액션 본문:

  actions: {
    setFileId({commit}, id) {
      console.log('mutating file id');
      commit('mutateFileId', id);
    },
  },

그 동작을 다른 하나의 모듈로부터 트리거한다고 해도console.log두 번 인쇄됩니다.

중복되지 않고 네스트된 모듈을 공유할 수 있는 방법이 있나요?

공유 중첩 모듈은 vuex에서 지원되지 않습니다.

다른 모듈에서도 문제없이 커밋하여 디스패치 할 수 있기 때문에 필요 없는 기능이라고 생각합니다.

그냥 네가 합격해야 한다는 걸 명심해{root: true}내부에서 커밋/커밋할 때의 세 번째 인수로서namespaced: true모듈:

commit('setFileId', 2, {root: true})

아니, 할 수 있어!

네임스페이스 사용...이를 통해 실행 중인 모듈의 버전이 정의됩니다.예를 들면...

ImageModule 및 DocumentModule에 fileIdModule이 연결되어 있는 경우...

네임스페이스를 사용하여 각 디스패치('ImageModule/fileIdModule/setId')를 정의할 수 있습니다.

기타...

언급URL : https://stackoverflow.com/questions/51280206/vuex-shared-nested-module-in-different-modules-without-duplication