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

我已将操作分解为多个文件，以使我的项目更具可维护性和可扩展性。尝试去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,
  },
}

My actions.js文件夹有以下内容：

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

export default {
  CREATE_SHAPE,
  ADD_SHAPE,
}

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

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

export default CREATE_SHAPE;

但它返回给我这个：

[vuex] unknown local action type

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

如果您在操作文件中使用“导出默认...”并将文件导入到商店中，如下所示：

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

然后，您可以使用展开运算符使其像导入一个对象一样：

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