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

如果您在操作文件中使用“导出默认值...”，然后像这样将文件导入存储中：

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

然后，您可以使用散布运算符使它像导入一个对象一样：

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

Answer 2

您需要让Vuex知道actions.js，createShape.js和addShape.js是商店的“模块”，才能正常工作。您可以在Vuex Modules documentation中详细了解它。

基本上，您需要一个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存储模块，在这种情况下，只需指出here即可指定“ root = true”。

如何将Vuex动作分解为多个文件并仍然使用`dispatch`？

2 个答案: