Question

我已经在使用模块将Vuex存储分解为单独的文件，但是想知道是否以及如何将存储操作再次分解为多个文件？

某些上下文-我在基于Vue的Electron应用程序中有一个Products商店。在这种情况下，我有多种方法可以从本地数据库加载产品，在本地数据库中没有产品时下载产品，并在本地数据库中更新产品。因此，您可以想象，我在此存储文件中的操作越来越大。

因此，到目前为止，我已经尝试将它们分为2个文件，initial和update，然后将其导入和合并，如下所示：

inital.js：

export default {
    // My methods
}

update.js：

export default {
    // My methods
}

products.js（商店模块）：

import initialActions from './actions/intial';
import updateActions from './actions/update';

const actions = Object.assign(initialActions, updateActions);

现在，当我调用它们时，state, dispatch, commit尚未定义。因此，我有些困惑，有点不愿意将它们重新合并到存储文件中。

结构：

- store
  - modules
    - products
      - products.js
      - actions
        - initial.js
        - update.js

Answer 1

动作1

export default { //methods }

动作2

export default { //methods }

actions.js

import 'action1.js'
import 'action2.js'    
export default { ...action1, ...action2 }

对于突变和吸气剂也是如此。

Answer 2

尝试一下：

import * as initialActions from './actions/intial';
import * as updateActions from './actions/update';

const actions = Object.assign({}, initialActions.default, updateActions.default);

Answer 3

这意味着您尚未将其导出到商店中，没有在商店文件夹中创建index.js并根据需要导出状态和操作。同样，请始终遵循标准目录结构，然后将其导出。

典型的index.js看起来像

import actions from './actions'
import getters from './getters'
import mutations from './mutations'
import state from './state'

 export default {
        namespaced: true,
        actions,
        getters,
        mutations,
        state
    }

典型的标准商店目录如下

Store
├── actions.js
├── getters.js
├── index.js
├── modules
│   ├── app
│   │   ├── mutations.js
│   │   └── state.js
│   └── index.js
├── mutations.js
└── state.js

这样，您将永远不会得到未定义的错误。希望有帮助！

将Vuex操作分成多个文件

3 个答案: