【Vue】Vuex 的原理

总结

1. 什么是 Vuex？

Vuex 是一个状态管理模式，它主要用于多视图之间状态的全局共享与管理。

Vuex 有五种属性，分别是： State、 Getter、Mutation 、Action、 Module。

• vuex的State特性
  A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
  B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
  C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
• vuex的Getter特性
  A、getters 可以对State进行计算操作，它就是Store的计算属性
  B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
  C、 如果一个状态只在一个组件内使用，是可以不用getters
• vuex的Mutation特性
  Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

2. 为什么要使用 Vuex？

当【多个视图依赖于同一状态】时，采用传参的方式对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

当【来自不同视图的行为需要变更同一状态】时，采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致代码难以维护。

所以，我们需要把组件的共享状态抽取出来，以一个全局单例模式进行管理。同时，Vuex 制定了相应的规则去获取和变更状态，这样，我们的代码将会变得更加结构化，而且易于维护。

规则：在Vuex中只能通过mutations改变状态。

3. 什么情况下应该使用 Vuex？
如果构建的是简单应用，一个简单的 global event bus 就足够了。但是，如果需要构建一个中大型单页应用，Vuex 将会成为自然而然的选择。

4. Vuex 和全局对象的区别？
（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
（2）你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，也有利于调试。

5. Vuex 和 localStorage 的区别？

（1）如果刷新页面，Vuex 的数据全部都会被初始化掉。

（2）localStorage 不受刷新页面的控制，可以长久保存。

6. 其他

Vuex 还集成到了 Vue 的官方调试工具，有利于我们进行调试。

Vuex 通过 Vue 实现响应式，因此只能用于 Vue。

---

一、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

二、 Vuex的原理

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
1、多个视图依赖于同一状态。
2、来自不同视图的行为需要变更同一状态。
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。
这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

如图所示，Vuex为Vue Components建立起了一个完整的生态圈，包括开发中的API调用一环。围绕这个生态圈，简要介绍一下 流程 and 各模块 在核心流程中的主要功能：

核心流程：

① Vue Components 是我们的 vue 组件，组件会触发（dispatch）一些事件或动作，也就是图中的 Actions；

② 我们在组件中发出的动作，肯定是想获取或者改变数据的，但是在 vuex 中，数据是集中管理的，我们不能直接去更改数据，所以会把这个动作提交（Commit）到 Mutations 中；

③ 然后 Mutations 就去改变（Mutate）State 中的数据；

④ 当 State 中的数据被改变之后，就会重新渲染（Render）到 Vue Components 中去，组件展示更新后的数据，完成一个流程。

各模块在核心流程中的主要功能：

Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。

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

actions：操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。

commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。

mutations：状态改变操作方法。是Vuex修改state的唯一推荐方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。

state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。

getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

三、什么情况下应该使用 Vuex

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

四、Vuex和全局变量的区别

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

五、Vuex和localStorage的区别

Vuex是状态管理，是为了解决跨组件之间数据共享问题的，一个组件的数据变化会映射到使用这个数据的其他组件当中。如果刷新页面，之前存储的vuex数据全部都会被初始化掉。

localStorage是H5提供的一个更简单的数据存储方式，之前是用cookie存放数据，但是cookie的数据量太小，所以就用localStorage，它可以有5M的限制，不受刷新页面的控制，长久保存。

 

参考：

简书——vuex概念总结及简单使用实例

简书——对于vuex原理的简单理解

vuex 和 localStorage，全局变量的区别

END