许多人在自学完Vue.js后还会看见三个时常被提到的词汇叫作Vuex。
Vuex字面看与Vue.js只差了三个拉丁字母，但他们三个做的事全然不那样。
在责任编辑就要像以后的 Vue.js叙尔热雷县手册该文那样的概要形式来写该文。
1.Vuex是甚么？
他们却是像过往那样先看看非官方文件格式为此的阐释（Vuex 是甚么？ · GitBook）
Vuex 是三个专为 Vue.js 应用领域程序开发的状况区域化。它选用封闭式repeats应用领域的大部份模块的状况，并以适当的准则确保状况以一类可预估的形式发生改变。Vuex 也软件系统到 Vue 的非官方增容辅助工具devtools extension，提供更多了譬如零实用性的 time-travel 增容、状况镜像引入求出等高阶增容机能。呢又碰到了许多看上去很矮小上听出来却满脸懵逼的专有名词？喽喽，他们总之探究呵呵那个Vuex究竟是个啥小东西，他能做些啥。
2.Vuex究竟用以做甚么？
用浅显一点儿不然而言，Vuex就是三个用作管理工作SPA工程项目（不晓得SPA是甚么？请参照本时评标识符之美 – chan时评中的发展史文章）中状况的开放源码商品。
接下去又带出了三个难题，甚么是状况，为甚么要用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中就可以在视图中对那个状况做出响应。
读取状况当然也是直接读取那个属性里面的各种子属性了。
非官方文件格式：Getters · GitBook
比如说后端返回给他们的是三个int类型的时间戳，他们想把那个时间戳转换成正常人类可读的文本型时间表现形式（比如说2017年3月11日
还
etter下的各种函数即可。
9.Mutations（转变）
非官方文件格式：Mutations · GitBook
那个Mutations其实国内目前也没有比较好的翻译，通常他们都是直接称Mutations。
非官方文件格式中已经讲了需要先在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.rootState12.严格模式
非官方文件格式：严格模式 · GitBook
在严格模式下，无论何时发生了状况变更且不是由 mutation 函数引起的，将会抛出错误。这能确保大部份的状况变更都能被增容辅助工具跟踪到。前面提到了state的修改需要通过提交Mutations或者分发Actions，但事实上我直接修改state可以吗？当然也是可以的，但在开发阶段，为了尽可能防止开发者直接修改，就可以通过严格模式来检测这种错误的修改形式，并且抛出异常。
但非官方文件格式后面也提到了：
不要在发布环境下启用严格模式！严格模式会深度监测状况树来检测不合规的状况变更——请确保在发布环境下关闭严格模式，以避免性能损失。因此不要在生产环境下开启严格模式导致性能损失。
结语：
Vuex综合来看是三个非常适合在Vue.js中使用的状况管理工作辅助工具，当然类似的状况管理工作辅助工具也有许多，比如说React的Redux。
但他们为了能够尽可能确保工程项目稳定性以及自学曲线的平滑，推荐在Vue.js中使用Vuex。
其实该文中也还有许多细节部分没有讲到，这些细节非官方文件格式的说明却是比较浅显易懂这里就不做更多搬运来凑字数。当然后面也有热重载，测试等方面由于楼主自己的工程项目中也未使用过，所以不敢留有更多笔墨，还等楼主继续探索实践才能写出更多好该文。
作者：昌维
via：https://zhuanlan.zhihu.com/p/25701238
