0.手把手教你使用Vuex - 文集简介
为什么要做这篇文集呢？市面上关于vuex的教程多入牛毛，甚至vuex被某些大神都封装出花儿来了；其实做这篇文集的最主要的原因是前几日和一位即将毕业的小哥聊了一些，他是自学前端，对于vuex不是很明白，就是基于这个简单的原因，促使我开始查阅有关的资料，经过几天整理，最后，得到了这篇文集。好，不多废话了，接下来我们简单对vuex介绍一下，这究竟是个啥？
-
🤡 第一步，如果你想了解一个技术，就去他的官网去看，准没错
官网贴在这里了：我是vuex的官网<中文版> -
🧐 进入官网，映入眼帘的就是 ” vuex是什么 “
image.png
如图所示，它是一个程序里面的状态管理模式，它是集中式存储所有组件的状态的小仓库，并且保持我们存储的状态以一种可以预测的方式发生变化。对于可以预测，现在我不多做说明，相信在看完这篇文集之后，你就会有自己的理解。 -
🤯 想象一个场景
如果你的项目里有很多页面(组件/视图)，页面之间存在多级的嵌套关系，此时，这些页面假如都需要共享一个状态的时候，此时就会产生以下两个问题：- 1.多个视图依赖同一个状态
- 2.来自不同视图的行为需要变更同一个状态
-
🤪 动动你的小脑袋你就会想到解决以上方法的方案:
- 对于第一个问题，假如是多级嵌套关系，你可以使用父子组件传参进行解决，虽有些麻烦，但好在可以解决；对于兄弟组件或者八竿子打不到关系的组件之间，就很难办了，当然你可以使用Bus中央事件总线这种方案，可实在是不优雅，等项目做大了，就感觉思维飞来飞去，就像电脑机箱里面乱七八糟的飞线一样，虽解决了问题，但确实在让人心烦。
- 对于第二个问题，你可以通过父子组件直接引用，或者通过事件来变更或者同步状态的多份拷贝，这种模式很脆弱，往往使得代码难以维护。
-
😇 此时，既然思考到了这里，如果换一种思路呢，把各个组件都需要依赖的同一个状态抽取出来，在全局使用单例模式进行管理；在这种模式下，任一组件都可以直接访问到这个状态，或者当状态发生改变时，所有的组件都获得更新。
-
就像我画的图这样子，任一组件都可以直接去vuex里面去取值也可以设置值，vuex里面存的就是单例的一份数据。
image.png
-
这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
-
😨 接着，你就会看到下面这张让你迷茫的vuex的使用周期图，讲道理，我在学习vuex的时候，对下面这张图很恐惧，看不懂，看懂了也记不住那么多方法，虽说就几个方法，可还是需要死记硬背；不过我相信，在下面的文集中，按照我的思路看下去的话，你一定不会像我之前一样迷茫的~
image.png
-
🤩 什么时候应该用vuex呢？
这个问题因人而异，如果你不需要开发大型的单页应用，此时你完全没有必要使用vuex，比如你的页面就两三个，使用vuex后增加的文件比你现在的页面还要多，那就没这个必要了。假如你的项目达到了中大型应用，此时您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
改编自 Redux 的作者 Dan Abramov 的话说就是：
vuex就像眼镜，您自会知道什么时候需要它。
