Как я могу разбить свои действия Vuex на несколько файлов и все еще использовать `dispatch`?

Question

Я разбил свои действия на несколько файлов, чтобы сделать мой проект более понятным и расширяемым.Однако попытка dispatch от одного действия к другому не работает.

Мое дерево файлов выглядит следующим образом:

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

Мой 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_SHAPE.Мой createShape.js выглядит следующим образом:

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

export default CREATE_SHAPE;

Но он возвращает мне это:

[vuex] unknown local action type

Вопрос заключается в следующем: как я могу разбить свои действия на несколько файлов, но все жебыть в состоянии dispatch действия от одного к другому?

Answer 1

вам нужно сообщить Vuex, что actions.js, createShape.js и addShape.js являются «модулями» вашего магазина, чтобы это работало.Подробнее об этом можно прочитать в документации Vuex Modules .

. В основном вам нужен файл 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
  }
});

В этот момент ваш диспетчерский вызов должен работать, UNLESS он поступает из другого модуля хранилища vuex, в этом случае просто укажите «root = true» какони указали здесь .