首页 文章

Vuex模块结构

提问于
浏览 次
0

试图在教程和示例中找到这个，但没有找到任何相关的东西 . 我知道开发人员需要对其进行构建，但我想知道应该如何成为以下方面的最佳方法：

我有一个商店，模块如下：

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

等等 .

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

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

我现在在做什么：

  • 一个名为'tasks.js'的文件

  • 它加载所有任务，每个任务的信息已经嵌套

  • 当我点击时，我设置了'currentTaskId'变量 . 更新/删除/ etc时，所有操作都引用此变量

  • 我正在加载任务列表，并将ID作为密钥，因此我可以通过任务[id]轻松引用它，而不是每次都进行搜索 .

我的疑惑：

  • 这个结构好吗？或者我应该创建一个模块来处理单个对象？

  • 使用ID作为数组的键确实是一个好习惯吗？

  • 任何其他输入 . 我知道Vuex对结构非常灵活，但我发现自己试图想出一个很好的结构，但我害怕过度思考一些应该更简单的东西 .

vue.js vuex

1 回答

  • 1

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

    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 .

    回复于

相关问题