WEB前端：vuejs全家桶（39）：分模块组织Vuex--项目结构

最新推荐文章于 2024-03-25 08:47:58 发布

原创最新推荐文章于 2024-03-25 08:47:58 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vuejs

vuejs 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何使用Vuex进行模块化组织，通过分离action、mutation和getter，以及将相关代码分割到模块中，来实现大型应用的状态管理。遵循Vuex规则，确保应用状态的集中管理和一致性。

### 3. 分模块组织Vuex          

    |-src
        |-store
            |-index.js
            |-getters.js
            |-actions.js
            |-mutations.js
            |-modules  //分为多个模块，每个模块都可以拥有自己的state、getters、actions、mutations
                |-user.js
                |-cart.js
                |-goods.js
                |....

文档
https://vuex.vuejs.org/zh/guide/structure.html

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

应用层级的状态应该集中到单个 store 对象中。

提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，
只需将 action、mutation 和 getter 分割到单独的文件。

对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块