vuex 学习之路 —— 概念

一、是什么？

vuex 是一个专为 vue 应用程序开发的 状态管理模式 + 库， 它采用集中式存储管理应用的所有组件和状态，它包含以下几个部分：

• 状态(m)：驱动应用的数据源
• 视图(v)：以声明方式将状态映射到视图
• 操作(c)：响应在视图上的用户输入导致的状态变化

---

二、为什么？

当我们应用遇到多个组件共享状态时，单项数据流的简洁性很容易被破坏，例如以下问题：

1. 多个视图依赖于同一状态
2. 来自不同视图的行为需要变更同一状态

针对以上问题，vuex 作为一个全局单例模式，将所有组件共享的状态抽取出来，形成了一个很好的的解决方案。

---

三、规则

在你使用 vuex 的时候，还是需要遵守一些它的规则：

1. 应用层级的状态应该集中到单个 store 对象中
2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的
3. 异步逻辑应该封装到 action 里面

项目的结构简例

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