如何将我的 Vuex 操作分解为多个文件并仍然使用`dispatch`？答案

【问题标题】：How can I break my Vuex actions into multiple files and still use `dispatch`?如何将我的 Vuex 操作分解为多个文件并仍然使用`dispatch`？
【发布时间】：2019-08-20 23:38:11
【问题描述】：

我已将我的操作分解为多个文件，以使我的项目更易于维护和扩展。但是，尝试从一个动作到另一个动作 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,
}

问题是试图从CREATE_SHAPE 调度ADD_SHAPE。我的 createShape.js 如下所示：

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

export default CREATE_SHAPE;

但它返回给我这个：

[vuex] unknown local action type

问题是：我怎样才能将我的操作分成多个文件，但仍然能够dispatch 操作从一个到另一个？

【问题讨论】：

您能否详细说明如何调度这些操作？
我可能会使用 ...mapActions(['myModuleName', 'CREATE_SHAPE') 之类的组件从组件中 dispatch 这些操作。

标签： vue.js vuex

【解决方案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
  },
...

【讨论】：

【解决方案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 存储模块，在这种情况下，只需指定“root = true”，正如他们指出的 here。

【讨论】：

我希望将createShape 和addShape 导入actions。
如果它们已经是两个 vuex 存储模块，您应该使用“root=true”选项调用调度。不需要将动作 A 从模块 A 导入模块 B。如果这是您的需要并且不分派该动作 A，那么该动作 A 应该属于模块 B。
从一个模块导入到另一个模块不是我想要的。它们都包含在同一个模块中。
如果您使用“root=true”进行调度，它是否有效？那是在您使用的 createShape.js 中：return dispatch('ADD_SHAPE' , {root:true})