로드 시 Vuex의 모듈에 데이터 전달

로드 시 Vuex의 모듈에 데이터 전달

API에 대한 CRUD 메서드를 위한 재사용 가능한 Vuex 모듈이 있습니다.로드할 때 상위 모듈에서 관련 URL을 전달하려면 어떻게 해야 합니까? 예를 들어,

company.module.js

var URL;
const state = {
   all: [],
   items: [],
   editing: false,
   url: URL
};
...
export default {
   state,
   getters,
   actions,
   mutations,
   modules: {
     crud: crudModule
   }
};

crud.module.js

const state = {
    url: '', // Get the URL from company.module here?
    status: {
        loading: false,
        success: false,
        error  : false
    }
};
...
const actions = {
     async fetchItems(context, data ) {
         commit('QUERY_REQUEST');
         var url = '';// Or get the URL from parent state?
         return axios.get( url )
             .then( response => {
                 ...
             });
     },
}
...
export default {
     namespaced: true,
     modules: {
         meta: metaModule
     },
     state: () => state,
     getters,
     mutations,
     actions
};

난 이해했다.모듈 대신, 저는 엔드포인트를 매개변수로 하는 클래스에 거친 상태, 게터, 돌연변이 및 행동을 넣었습니다.그러면 사용할 수 있습니다.Crud내 이름으로 된 각 모듈의 클래스와 스프레드 연산자를 사용하여 병합합니다.

crud.js

export default class {
    constructor ( endpoint ) {
       this.state = {
          url: endpoint,
          status: {
            loading: false,
            success: false,
            error  : false
          }
       };

        this.getters = getters;
        this.mutations = mutations;
        this.actions = actions;
    }
}

const getters = {
  //...
};
const actions = {
  //...
};
const mutations = {
  //...
};

company.module.js

import Crud from './api/crud';
let endpoint = "/api/companies";

var crud = new Crud( endpoint );

const state = {
    ...crud.state
};

const getters = {
    ...crud.getters  
};

const actions = {
    ...crud.actions
};

const mutations = {
    ...crud.mutations
};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
};

이것은 효과가 있을 것입니다.

 async fetchItems({commit, rootGetters }, data ) {
     commit('QUERY_REQUEST');
     let url = rootGetters['company/url']
 }

공식 문서 링크: access-global-messages-in-namespatched-messages.

언급URL : https://stackoverflow.com/questions/52306770/pass-data-to-module-in-vuex-on-load