我已经在使用模块将我的 Vuex 存储分解为单独的文件,但想知道您是否以及如何再次将存储操作分解为多个文件?
一些上下文 - 我在基于 Vue 的 Electron 应用程序中有一个Products
存储。在此,我有多种方法可以从本地数据库加载产品,在本地数据库中没有产品时下载产品并更新本地数据库中的产品。所以我相信你可以想象,我在这个存储文件中的操作变得相当大。
因此,到目前为止,我尝试将它们拆分为2个文件,initial
和update
,然后将其导入并合并,如下所示:
初始.js:
export default {
// My methods
}
更新.js:
export default {
// My methods
}
产品.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
action1
export default { //methods }
操作2
export default { //methods }
操作.js
import 'action1.js'
import 'action2.js'
export default { ...action1, ...action2 }
突变和获取者也是如此。
试试这个:
import * as initialActions from './actions/intial';
import * as updateActions from './actions/update';
const actions = Object.assign({}, initialActions.default, updateActions.default);
这意味着您尚未导出商店中的那些,创建索引.js在商店文件夹中并根据需要导出状态和操作。还要始终遵循标准目录结构,然后导出它们。
典型的索引.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
这样,您将永远不会收到未定义的错误。希望这个帮助!