Question

试图在教程和示例中找到这个，但没有发现任何相关内容。我知道开发人员需要对其进行构建，但我想知道如何应对以下方法：

我有一个商店，模块如：

- root/
--- app-store.js
--- modules/
----- tasks.js
----- another-module.js

等等。

我完全了解了模块，命名空间。但我不太确定如何处理这种情况（例子）：

1 - 我访问任务列表。 2 - 单击列表中的任务，它将显示包含所有详细信息的视图。 3 - 您对此任务进行了一些更改（更新，删除等）

我现在正在做的事情：

一个名为＆＃39; tasks.js＆＃39;
它使用已经嵌套的每个任务的信息加载所有任务
当我点击时，我设置了一个＆＃39; currentTaskId＆＃39;变量。更新/删除/ etc
我以ID作为键加载任务列表，因此我可以通过任务[id]轻松引用它，而不是每次都进行搜索。

我的怀疑：

这个结构好吗？或者我应该创建一个模块来处理单个对象？
使用ID作为数组的Key真的是一个好习惯吗？
任何其他输入。我知道Vuex对结构非常灵活，但我发现自己试图想出一个漂亮的结构，但我害怕过度思考一些应该更简单的东西。

Answer 1

结构始终是开发人员的选择。如果您感到困惑，可以查看Vuex Application Structure。

申请结构

Vuex并不真正限制您构建代码的方式。相反，它强制执行一系列高级原则：

应用程序级状态集中在商店中。
改变状态的唯一方法是提交突变，即是同步交易。
异步逻辑应该封装在其中，并且可以组合行动。

只要遵守这些规则，您就可以自行决定如何构建项目。如果您的商店文件太大，只需将操作，突变和getter拆分为单独的文件即可。

对于任何非平凡的应用程序，我们可能需要利用模块。这是一个示例项目结构：

├── index.html
├── main.js
├── api
│   └── ... # abstractions for making API requests
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # where we assemble modules and export the store
    ├── actions.js        # root actions
    ├── mutations.js      # root mutations
    └── modules
        ├── cart.js       # cart module
        └── products.js   # products module

作为参考，请查看Shopping Cart Example。

Vuex模块结构

1 个答案: