将 Vuex 操作分解为多个文件

Posted 2023-02-22

【中文标题】将 Vuex 操作分解为多个文件

【英文标题】：Breaking Vuex actions into multiple files

【发布时间】：2019-06-11 22:13:02

【问题描述】：

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

一些上下文 - 我在基于 Vue 的 Electron 应用程序中有一个 Products 存储。在此，我有多种方法可以从本地数据库加载产品，在本地数据库中没有产品时下载产品，并在本地数据库中更新产品。所以我相信你可以想象，我在这个存储文件中的操作变得相当大。

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

initial.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

【参考方案1】：

动作1

export default  //methods 

动作2

export default  //methods 

actions.js

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

突变和吸气剂也是如此。

【参考方案2】：

试试这个：

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

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

【讨论】：

运气不好，仍然未定义。例如loadProducts( state, commit, dispatch , params) 、state, commit, dispatch 未定义。

你能分享一个工作代码笔/jsfiddle吗？对找出问题有很大帮助。

当然，所以我尝试模拟它，但显然它是在 1 个文件而不是多个文件中运行：jsfiddle.net/n0h1q4po

【参考方案3】：

这意味着你还没有导出你 store 中的那些，在你的 store 文件夹中创建 index.js 并根据需要导出你的 state，action。也始终遵循标准目录结构，然后导出它们。

一个典型的 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

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

【讨论】：

当特定操作需要提交突变时，我应该如何处理？将它们分隔在不同的文件中会导致进一步的错误...？

我并不是说你必须在不同的文件中分离操作，但只有当你知道你的文件是如何导出时，这才是惯例。例如在 vue 中的github.com/vuejs/vue-hackernews-2.0/blob/master/src/store/… HackerNews..你可以看到获取用户。在代码中，我们可以这样调度：- store.dispatch('FETCH_USER', id )