Vuex 작업을 여러 파일로 분할

Vuex 작업을 여러 파일로 분할

이미 모듈을 사용하여 Vuex 저장소를 별도의 파일로 분해하고 있는데 저장소의 작업을 여러 파일로 다시 분리할 수 있는지 궁금하십니까?

어떤 문맥 - 나는ProductsVue 기반 Electronic 애플리케이션에 저장.이를 통해 나는 로컬 db에서 제품을 로드하고 로컬 db에 없는 경우 제품을 다운로드하고 로컬 db에서 제품을 업데이트하는 다양한 방법을 가지고 있다.짐작하시겠지만, 이 가게 파일 안의 저의 행동은 점점 더 커지고 있답니다.

그래서 지금까지 2개의 파일로 나눠봤는데initial그리고update, 그런 다음 가져오기 및 병합됨.

inital.js:

export default {
    // My methods
}

update.js:

export default {
    // My methods
}

products.js(스토어 모듈):

import initialActions from './actions/intial';
import updateActions from './actions/update';

const actions = Object.assign(initialActions, updateActions);

이제 내가 전화하면state, dispatch, commit정의되지 않음.그래서 나는 좀 막혀서 그것들을 다시 가게 파일에 합치는 것을 꺼려한다.

구조:

- store
  - modules
    - products
      - products.js
      - actions
        - initial.js
        - update.js

액션1

export default { //methods }

액션2

export default { //methods }

actions.js

import 'action1.js'
import 'action2.js'    
export default { ...action1, ...action2 }

돌연변이나 게이터도 마찬가지.

다음을 시도해 보십시오.

import * as initialActions from './actions/intial';
import * as updateActions from './actions/update';

const actions = Object.assign({}, initialActions.default, updateActions.default);

즉, 저장소에 있는 항목을 내보내지 않고, 저장소 폴더에 인덱스.js를 만들고, 필요에 따라 상태, 작업을 내보내지 마십시오.또한 항상 표준 디렉터리 구조를 따른 다음 내보내십시오.

전형적인 인덱스.js는 다음과 같이 보인다.

import actions from './actions'
import getters from './getters'
import mutations from './mutations'
import state from './state'

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

그리고 일반적인 표준 상점 디렉토리는

Store
├── actions.js
├── getters.js
├── index.js
├── modules
│   ├── app
│   │   ├── mutations.js
│   │   └── state.js
│   └── index.js
├── mutations.js
└── state.js

이렇게 하면 정의되지 않은 오류가 결코 생기지 않을 것이다.이것이 도움이 되기를!

참조URL: https://stackoverflow.com/questions/54240544/breaking-vuex-actions-into-multiple-files