Vuex是什么？
官方的说法是：vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。通俗地可以理解为是定义了一个全局对象，所有页面都可以访问。当你在state中定义了一个数据之后，你可以在当前项目中的任何一个组件里获取、修改该数据，并且你的修改可以让项目中所有引用该数据的地方都做出相应的变更。
使用Vuex有什么好处？
1、共享状态：不同组件之间，可进行状态的修改和读取，方便统一管理、维护；
2、数据缓存：防止刷新页面后数据丢失，减少向服务器请求数据，节省资源；
3、单向数据流：数据统一管理，更加易于程序的稳定。
Vuex有哪几种属性？
有五种，分别是 State、 Getters、Mutations 、Actions、 Modules。
State：vuex的数据源，存放需要保存的数据，可通过 this.$store.state来获取state对象属性值。
Getters：类似vue中的computed计算属性。Getters返回值会根据依赖被缓存起来，且只有当依赖值发生了改变才会被重新计算。
Mutations：同步状态。建议只使用Mutations修改state属性值。
Actions：异步操作。Action 类似于 mutation，但又不同于mutation，Action 提交的是 mutation，触发state属性值变更，不直接变更状态。
Modules：store的子模块，为了开发大型项目，方便状态管理而使用的。每个模块（module）拥有自己的 State、Mutation、Action、Getter、甚至是嵌套子模块。
如下是尤大大官方解析图：
Vuex怎么用？
安装vuex。vuex官方提供了多种安装方法，最常用的就是npm install vuex –save。在 vue 2.0+ 你的vue-cli项目中安装 vuex :
npm install vuex–save
我们知道vue全家桶大都是使用插件式的引入，如下是vuex的install源码的部分解析：
在项目如何实践呢？在src文件目录下新建名为store的文件夹，为方便引入和后期多模块开发，首先在store文件夹下新建一个名为index.js的文件，然后全局引入vuex，将vuex挂载在vue对象上。
在main.js中引入store，并全局注入，方便其他组件中使用。
现在基石已搭建完毕。下面在store文件夹下index.js文件中声明一个state变量，并赋值一个空对象给它，里面定义所需要的初始属性值，再将刚声明的变量state注入到Vuex.Store实例对象中。
以上设置完毕后，下面可以通过this.$store.state.num在任何组件中访问state对象中定义的num属性值。
除了state外，vuex官方API提供了一个getters，和vue计算属性computed一样，来实时监听state值的变化，及时获取最新状态变化。
只能获取到并不是我们所想要的，接下来我们如何操作这个值呢？没错！用mutations和actions。我们继续操作index.js文件，我们分别在里面定义mutations对象和actions对象。
mutations对象里面可以放改变state的初始值的方法。该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。
下面actions中自定义的方法，可以在组件中通过this.$store.dispatch(‘addNum’, 1)直接调用。
因为modules里面内容和上面的大同小异，所以不再赘述。
以上操作数据、方法的方式使用起来有点麻烦，所以vuex官方给了我们一个更简单的方式来使用vuex里面的数据、方法，也就是 {mapState,mapMutations, mapActions, mapGetters}，这里用到了es6中扩展运算符。这样的话会方便很多。
以mapAction为例，简单看下的vuex源码，可梳理下逻辑。首先vuex初始化时，鉴于vuex的module属性，可在多模块调用，需要先标准下模块的namespace。执行mapAction时，获取当前上下文context的commit方法，传值调用commit.apply(this.$store, [val].concat(args))即可。
使用vuex需要注意什么？
如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
通过以上的学习，相信对vuex的基础用法已经掌握，下面就是在实际工作中应用了。
本篇文章来源于微信公众号: TripDesign
