Vuex 액션을 여러 파일로 분할하여 디스패치를 사용하려면 어떻게 해야 합니까?

Vuex 액션을 여러 파일로 분할하여 디스패치를 사용하려면 어떻게 해야 합니까?

프로젝트의 유지 보수성과 확장성을 높이기 위해 작업을 여러 파일로 분할했습니다.하려고 하고 있다dispatch단, 동작 간에 동작하지 않습니다.

내 파일 트리는 다음과 같습니다.

store.js
actions
  |--actions.js
  |--createShape.js
  |--addShape.js

my store.js는 다음과 같습니다.

import actions from './actions/actions'

const PlaypadStore = {
  namespaced: true,
  state: {
    localState: ''
  },
  actions: {
   ...actions,
  },
}

나의actions.js폴더에는 다음이 있습니다.

import CREATE_SHAPE from './createShape';
import ADD_SHAPE from './addShape';

export default {
  CREATE_SHAPE,
  ADD_SHAPE,
}

디스패치 시도 중 문제가 발생.ADD_SHAPE부터CREATE_SHAPEcreateShape.js는 다음과 같습니다.

const CREATE_SHAPE = ({ state, dispatch }) => {
  return dispatch('ADD_SHAPE')
}

export default CREATE_SHAPE;

하지만 이건 내게 돌아온다:

[vuex] unknown local action type

문제는 다음과 같습니다.어떻게 하면 액션을 여러 파일로 분할하여dispatch행동을 바꿀 수 있을까요?

작업 파일에서 'export default...'를 사용하고 저장소의 파일을 다음과 같이 가져오는 경우:

import actions_one from './actions_one';
import actions_two from './actions_two';

그런 다음 확산 연산자를 사용하여 하나의 개체를 가져오는 것처럼 만들 수 있습니다.

export default new Vuex.Store({
  namespaced: true,
  actions: {
    ...actions_one,
    ...actions_two
  },
...

Vuex에게 알려야 합니다.actions.js,createShape.js그리고.addShape.js이 기능이 작동하도록 하기 위해 당신의 상점을 "비판"하는 것입니다.자세한 내용은 Vuex 모듈 설명서를 참조하십시오.

기본적으로는index.js파일을 저장소의 루트에 모듈을 선언합니다.다음과 같이 표시됩니다.

import actions from "./actions";
import createShape from "./createShape";
import addShape from "./addShape";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    actions,
    createShape,
    addShape
  }
});

이 시점에서 디스패치 호출이 다른 vuex 스토어 모듈에서 전송되지 않는 한 여기서 지적한 대로 "root = true"를 지정하기만 하면 됩니다.

언급URL : https://stackoverflow.com/questions/55427428/how-can-i-break-my-vuex-actions-into-multiple-files-and-still-use-dispatch