Vuex에서 재사용 가능한 작업 가져오기

Vuex에서 재사용 가능한 작업 가져오기

저는 NUXT 프로젝트를 진행하고 있는데, 같은 액션을 여러 스토어/모듈에 복사하고 있습니다.따라서 액션을 다른 파일로 추출하여 모듈로 Import합니다.그것은 훌륭하지만 나는 때때로 보일러 플레이트가 아닌 추가 조치가 필요하다.어떻게 보일러 플레이트 액션을 Import하고 모듈 내에서 커스텀액션을 실행할 수 있습니까?

태그 모듈:

    import Vue from "vue";
    import globalActions from "../utils/Actions.js";
    export const state = () => ({ /* removed */ })
    export const actions = globalActions;
    //Need actions to be a bit more flexible to include non-boilerplate actions

문제가 될지는 모르겠지만, utils/Actions.js가 있습니다.일반적으로 모듈에 포함되어 있는 것은 표준적인 "export default {}"입니다.

      export default {
        all({ commit }, all) {
          all.data.forEach(item => {
            commit("add", item);
          });
        },

        async list({ commit, state, getters, dispatch }) {
           /* flush resets the state */
           commit("flush");
           /*Makes the api call using the repository setup */
           let params = getters.params;
           const results = await this.$repositories[state.type].index(params);
           const ids = results.data.map(item => item.id);
           let page = state.page;
           dispatch("all", results);
           /*Adds a encyclopedia that maps pages to index */
           commit("SET_REFERENCE", { page, ids });
           commit("totalItems", results.meta.total);
        },
     } 

모듈 동작은 다음과 같은 것이 이상적입니다.

    export const actions = {
      list(){ return globalActions.list } 
      nonBoilerPlateAction({commit})
    }

global Actions Import 방법 및 "이상적인" 액션 구문이 잘못되어 있는 것은 확실합니다만, 무엇을 조정해야 할지 잘 모르겠습니다.

가져온 작업과 사용자 지정 작업을 병합하려면 다음과 같은 방법으로 두 작업을 병합할 수 있습니다.

export const actions = { 
    ...globalActions, 
    nonBoilerPlateAction({commit}) { 
      commit('something') 
    } 
}

모듈을 재사용하는 방법은 잘 작동하지만 네임스페이스를 사용하는 것이 좋습니다.이렇게 하면 작성한 모든 모듈을 다른 파일로 Import하지 않고도 쉽게 재사용할 수 있습니다.다른 모듈에서 다른 모듈에 쉽게 액세스할 수 있습니다.

언급URL : https://stackoverflow.com/questions/57646249/importing-reusable-actions-in-vuex