了解 Vuex 工作流

vuex.png

如图示，Vuex 为 Vue components 建立了一个完整的生态圈，包括开发中的API调用一环。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 读取状态的时候，若 store 状态发生改变的时候，那么相应的组件也会得到高效更新。

Vuex 有哪几种属性？

• state：基本数据，存储数据的地方；可以理解为组件中的 data 属性。
• getter：从 state 中派生出出来的数据；可以理解为组件中的 computed 计算属性。
• mutations：提交更改数据，是 Vuex 修改 state 的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。
• actions：负责处理 Vue Components 接收到的所有交互行为，包含同步异步操作，支持多个同名方法，按照注册的顺序依次触发。向后端 API 请求的操作就放在这个模块中进行，该模块封装了 Promise，以支持 actions 的链式触发。
• modules：模块化 Vuex。

---

• Vue components：Vue 组件，

Vuex 的执行方法

1. Vue components 是我们 Vue 组件。在 HTML 负责接收用户操作等交互行为，通过 dispatch 方法触发对应的 actions 进行回应。

2. dispatch：操作行为触发方法，是唯一能够执行 action 的方式。

3. commit：再通过 actions 的 commit 来触发 mutations 来修改数据。mutations 接收到 commit 的请求，就会自动通过 Mutate 来修改 state，最后由 store 触发每一个调用它的组件的更新。

Vuex 的执行流程

Vue组件（action里面的dispatch）➡ actions（方法commit）➡ mutations（Mutate）➡ state（getter）➡ store更新所有调用 vuex 的组件（Vue Component组件）

官方示例地址：https://vuex.vuejs.org/zh/