Vuex 入门指南

1.Vuex是什么？

咱们仍是像以往同样先看一看官方文档对此的解读（Vuex 是什么？ · GitBook）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

是否是又遇到了不少看起来很高大上听起来却一脸懵逼的专业术语？别急别急，咱们慢慢来剖析一下这个Vuex到底是个啥东西，他能作些啥。

2.Vuex到底用来作什么？

用通俗一点的话来讲，Vuex就是一个用于管理SPA项目（不知道SPA是什么？请参考本专栏代码之美 - 知乎专栏中的历史文章）中状态的开源产品。

接下来又引出了一个问题，什么是状态，为何要用Vuex这个东西去管理它？

3.什么是状态？为何要去管理它？

状态这个东西其实咱们生活中随处可见。咱们头顶上的灯就有两种状态，一种是开，一种是关。状态说白了就是灯这个对象的的某个属性的值。

若是你对状态和属性这两个概念仍是有所不了解，那么我打一个其余的比方吧。

咱们平时是否有玩过王者荣耀或者英雄联盟LOL之类的网游？这些游戏里面每个英雄当前都有生命值，法力值，攻击力，法术强度，护甲和魔抗等等，这些是这个英雄的属性，也就是英雄这个对象当前的状态。

属性分为固定属性和可变属性，通常像LOL里面大部分ADC英雄若是没有特殊的被动或者其余装备的支持，那么它的的攻击距离都是固定的，这个就是固定属性，这种固定属性的状态因为正常状况下都是不变的，因此咱们能够直接写死在代码中（这种写死在代码中的变量的值称为硬编码），可是像其余的攻击力法术强度等等都是随装备和等级变化，那么这种属性是可变属性。

这些属性的状态因为会根据用户的各类操做（好比说出装备，打怪升级升级）变化。在传统的Vue.js的组件化开发中，通常这些状态都是分散在各个组件中，此时此刻若是两个英雄互相打起来了，那么就得分别去不一样的组件中取状态值，而后进行状态值的修改，最后还要互相读取对方的状态值。若是他们自己是父子组件，那么还能够经过事件触发或者Prop属性来传递状态，可是若是是不一样的组件，因为因为Vue.js自己组件之间有做用域，它们没法直接相互通讯，因此就须要一些东西例如Vuex去集中管理和追踪它的变化。（若是你如今仍是不明白这一大段话，能够好好回顾一下官方文档中组件 - vue.js非父子组件通讯 这个部分的内容）

在游戏中，这些状态通常以变量的形式保存在内存中，可是因为用户玩游戏的时候并非直接去使用内存管理工具查看他们在内存里面的值，而是经过游戏界面去看这些值，因此还须要像Vue.js这种MVVM框架将状态同步到视图中。这就是Vue.js和Vuex之间的关系了。

4.什么状况下我应该使用 Vuex？

官方文档（Vuex 是什么？ · GitBook）中说：

虽然 Vuex 能够帮助咱们管理共享状态，但也附带了更多的概念和框架。这须要对短时间和长期效益进行权衡。

若是您不打算开发大型单页应用，使用 Vuex 多是繁琐冗余的。确实是如此——若是您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。可是，若是您须要构建是一个中大型单页应用，您极可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为天然而然的选择。引用 Redux 的做者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道何时须要它。

他的意思其实就是若是开发的程序并非很庞大，一个页面中的组件不是不少而且他们之间并不须要大量频繁的互相读写操做，那么就能够直接使用传统的Vue.js中的组件Prop或者事件触发来修改状态，或者用组件 - vue.js#非父子组件通讯 中介绍的new一个空的Vue对象实例，而且经过事件触发等方式来跨组件通讯。

不然的话仍是建议使用Vuex。虽然Vuex自己须要有一段时间的学习成本，可是这个学习成本相对于你开发时期使用传统非父子组件通讯机制遇到的各类坑来讲仍是比较划算的。这个就看你本身的权衡了。

5.Vuex怎么安装和使用？

在前面讲解Vue.js入门的时候，咱们用的是Vue-Cli这个脚手架工具来搭建的，因为这个脚手架工具自己会帮咱们配置好npm的package.json文件，这个文件里面包含了这个Vue.js项目中全部依赖的包。

可是默认状况下这个脚手架工具没有为咱们将Vuex这个依赖包给包含进去，因此咱们得本身去“声明”一下咱们这个Vue.js项目中须要依赖Vuex这个包。

咱们该怎么“声明”呢？如今有两种办法：

一种是直接修改package.json，这种方法看起来有点复杂，不少新手怕一不当心修改出错，可能会致使整个package.json文件结构出错，影响之后项目的依赖安装。

还有一种方法比较安全，只须要一行命令：

npm install vuex --save

表示安装vuex这个包，--save表示将这个依赖包与本项目的依赖关系写入package.json中。

而后咱们仅仅安装了这个依赖包是没有用的，咱们还得在以前Vue-Cli为咱们自动构建好的项目文件中的main.js主入口文件的开头里面加上两行这样的代码：

import Vuex from 'vuex'
Vue.use(Vuex)

第一行是用ECMAScript6的import将vuex包导入进来（这个是否是和java中导入jar包以及php中导入命名空间很类似？）

第二行是Vue.js自己的插件注入语法（参考官方文档插件 - vue.js），将插件注入Vue.js的目的是方便咱们在插件内部调用它。

6.官方文档的五大核心概念是什么？

打开官方文档（Introduction · GitBook）能看到五大核心概念，他们都是啥？看了半天官方文档我仍是对它们没什么了解，楼主能不能以通俗易懂的方式讲解一下它们的做用？固然能够啦！

首先先看一遍这个代码，不须要你看懂它。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

7.State（状态）

官方文档：State · GitBook

这个状态就是前面所介绍的“状态”值的存放处。

看第6节末尾的代码中，状态就是在state属性中以键值对的形式声明这个SPA中全部的状态。上面的代码中声明了一个count状态。

之因此要在这里声明全部状态的缘由，一是让代码更加优雅，若是你接手你同事的项目的时候，可以一眼从Vuex的状态声明中看出这个应用中有哪些状态，确定开发效率杠杠滴。二是若是在这里声明了状态，那么Vuex就可以追踪到这个状态的变化。那么Vue.js中就能够在视图中对这个状态作出响应。

读取状态固然也是直接读取这个属性里面的各类子属性了。

8.Getter（获取器）

官方文档：Getters · GitBook

这个获取器和一些后端开发中模型层ORM中的获取器实际上是差很少的功能。

好比说后端返回给咱们的是一个int类型的时间戳，咱们想把这个时间戳转换成正常人类可读的文本型时间表现形式（好比说2017年3月11日 12:43:31），那么咱们就得在全部获取该状态的代码中增长一个转换函数。

但是如今有了状态获取器以后，咱们能够统一将这个时间戳转字符串的函数写在获取器里面，要调用的时候就直接调用获取器就行了。

还有一些其余场景也可使用获取器，好比说像错误码这种东西通常都是一个数字码对应一个文字形式的错误缘由，咱们也能够经过获取器来实现经过错误码拉取错误缘由的功能。

使用获取器的方法则是直接调用Vuex实例的getter下的各类函数便可。

9.Mutations（转变）

官方文档：Mutations · GitBook

这个Mutations其实国内目前也没有比较好的翻译，一般咱们都是直接称Mutations。

咱们前面只讲了能够经过调用Vuex的实例的state属性或者getter获取器来读取状态。可是没讲到如何修改状态。

官方文档中已经讲了须要先在Vuex实例的Mutations下编写对应的修改函数来修改状态。而且要修改的时候，要经过Vuex实例的commit方法来提交修改。也就是说任何对state状态的修改操做都必须写在Mutations中，而且还得用Vuex实例的commit来提交修改操做，而且因为Mutations函数能够传入参数，因此commit同理也能够传入参数。

这个时候可能有一些同窗就会提问了，前面既然讲到了读取能够直接访问Vuex实例的state属性，为何修改却不能直接去操做Vuex实例的state呢？官方文档和其余高手的回答是：

再次强调，咱们经过提交 mutation 的方式，而非直接改变 store.state.count，是由于咱们想要更明确地追踪到状态的变化。这个简单的约定可以让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让咱们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，咱们甚至能够实现如时间穿梭般的调试体验。

至关于咱们经过一个Mutations函数能够显式的在代码中告诉开发者，咱们这个SPA中究竟会对状态进行哪些操做，操做方式是什么。而且在后期咱们使用一些辅助开发工具，能够保存状态的快照，就像git或者svn同样能够回滚状态。若是你仍是有点不明白，总之你就按照官方文档说的去作吧，等开发一段时间以后会慢慢明白做者的良苦用心的，哈哈。

还有一个问题就是为何状态修改的提交必须经过Vuex实例的commit方法提交呢？为何不能直接调用Mutations函数呢？除了上面官方文档中提到的缘由，网上还有高手解释了：由于Vue.js的状态修改实际上是在内部有一个修改队列，经过commit的方式提交修改能够保证状态的修改是有序的。

10.Actions（动做）

官方文档：Actions · GitBook

前面提到了Mutations中能够对状态进行操做，可是忘记告诉各位同窗，Mutations中对状态的操做只能是同步操做，不能是异步操做。

若是这个时候咱们有一个对状态的修改操做是异步的怎么办呢？

首先看看什么是异步操做？好比说ajax就能够选择是否发起异步请求，发起异步请求以后，咱们就须要在回调函数里面进行请求结果的处理。关于JavaScript异步的知识你们能够先使用各类搜索引擎自学一下。

如今回到actions上来，看看官方文档（Actions · GitBook）：

Action 相似于 mutation，不一样在于：

• Action 提交的是 mutation，而不是直接变动状态。
• Action 能够包含任意异步操做。

其实异步的状态修改本质上仍是经过几个同步操做组合的，因此咱们仍是得先声明好mutation同步操做方法，而后在actions中进行异步操做。若是咱们暂时手头上没有ajax接口用于异步请求，那么咱们能够像官方文档同样用setTimeout这种最简单的测试方法来理解。

actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } 

前面讲到了mutation是用commit来提交操做的，那么actions是怎么提交的呢？官方文档中说了actions是使用Vuex实例的dispatch方法来提交（其实说分发会更加准确）的。

至于其余更详细的actions操做官方文档讲的仍是比较清楚的，没有什么比较复杂的概念，能够参考官方文档学习，这里不作更多讲解。

至于后面“组合actions”中提到的Promise对象以及 async / await 都是JavaScript中的一些特性，你们能够利用搜索引擎进行更多了解。

11.Modules（模块）

官方文档：Modules · GitBook

若是你的SPA项目很是的庞大，那么状态可能自己还须要进行分模块分类管理，这个时候就须要用到模块了。官方文档中已经给出了比较详细的模块操做代码，这里再也不作更多讲解。

至于前面在将actions的时候，官方文档中说actions方法在声明的时候须要带上一个context参数，缘由在这里能够获得解答：

对于模块内部的 action，context.state 是局部状态，根节点的状态是 context.rootState

12.严格模式

官方文档：严格模式 · GitBook

在严格模式下，不管什么时候发生了状态变动且不是由 mutation 函数引发的，将会抛出错误。这能保证全部的状态变动都能被调试工具跟踪到。

前面提到了state的修改须要经过提交Mutations或者分发Actions，可是事实上我直接修改state能够吗？固然也是能够的，可是在开发阶段，为了尽量防止开发者直接修改，就能够经过严格模式来检测这种错误的修改方式，而且抛出异常。

可是官方文档后面也提到了：

不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变动——请确保在发布环境下关闭严格模式，以免性能损失。

所以不要在生产环境下开启严格模式致使性能损失。

结语：

Vuex综合来看是一个很是适合在Vue.js中使用的状态管理工具，固然相似的状态管理工具也有不少，好比说React的Redux。

可是咱们为了可以尽量保证项目稳定性以及学习曲线的平滑，推荐在Vue.js中使用Vuex