这篇文章比较适合新手或只是简单了解过vuex的人去阅读，当你打算使用vuex,但是官方文档过于繁琐，过于官方，也许这篇文章适合你。
1.什么是vuex?
稍微了解过vuex的都知道vuex是状态管理器，并且是“集中式状态存储”管理方案，那么这句话是什么意思，不是组件里的data是用来放状态的吗？ 是的，组件里的data是用来存储当前组件状态的，vuex也是，但是区别是什么呢？
打个比方 ：（字不少，但保准你看完就能理解了，大白话）
你有一笔现金，你的钱要放在你家的保险柜，这是没有什么问题的，想买东西了就去保险柜里取，挣了钱放保险柜里，很方便。这里就是data的作用->你自家的保险柜，组件自己的状态存储器 但是当你要做生意，要给外地的伙伴汇款，或者是任何情况你很难亲自把你家保险柜里的现金交给远处的人，这时候你需要做的是什么？
之前你会去邮局汇款，直接汇入对方账户，或者让其他人替你送一趟，那么收你钱的那个人要去邮局取钱，或者找替你送钱的人对接，这样他才能收到你的钱 这里你有没有感觉到组件中的props传参的方式就是这种形式的实现。
那么vuex是什么？在上边写道，钱都在你家保险箱，当需要给别人汇款时需要去邮寄还需要收款人去收款，很是麻烦，vuex就可以看作是现在的银行，支付宝，微信钱包，你把你家需要用在生意运转上的钱放到银行/支付宝/微信钱包吧，这样的话，无论是你再给远在任何地方的人汇款，或者你挣钱了想把钱存起来，只需要使用银行/支付宝/微信钱包等提供的汇款/存款方式，在家就能能完成，不需要麻烦任何人，当然你还可以选择在自家保险柜放一些你平时需要用的零花钱，当然无论如何，任你选择，你方便就行。
2.怎么用vuex
通过上边的例子，你因该知道什么是vuex和应该在什么时候用了吧 ，那么怎么用？
结合银行存款的例子
1.开通银行账户
大家都知道，开通一个银行账户需要一些列的资料证明，当然使用vuex也是需要安装和设置的，安装的方式自行查询文档，那个写的很明白
（1）npm i vuex -s (在根目录执行npm命令，-s在当前项目安装)
（2）安装完之后，会出现store文件，这里就相当于你的账户了，里边有个index.js文件，你需要引入vue，引入vueRouter 然后vue.use(vueRouter) 然后
export default const store =new VueRouter({
稍后告诉你这里的内容，这是你账户你的各种信息
})
最后在main.js里导入store 在vue实例上注册一下，这个参照官方文档，步骤就是记住就行，先不用理解
（3）上边的完成之后，就开始设置你在银行的这张存储卡的账户信息了，这是你开的第一张卡，至于为什么说是第一张，后边会讲，因为你刚会开卡，先开一张试试，怕开多了你顾不过来。
2.设置账户信息，怎么设置账户信息，也就是问怎么使用vuex？
接下来我就少提账户存钱这件事了，我怕把你们弄糊涂，你们大概知道是这么回事就行
在vuex中有五个属性，暂时先说前四个，因为最后一个前期不需要你用。
（1）state 属性 ：该属性就是跟组件里的data相同，就是银行的保险柜，用来放所有人存的钱->用来放所有组件存的状态
（2）getters :该属性就是vuex里的计算属性，跟vue的计算属性职能差不多，会有状态依赖缓存，但是如果该属性里的方法返回的是一个函数，后面调用的时候采用的是函数调用的方式来使用getters，那么就不会有缓存，每次调用会重新执行计算
（3）mutations:该属性就是用来同步修改state的方法的，因为vuex规定修改state必须要通过提交一个mutation，而不能在任何地方都采用赋值的方式修改state。也就是说在银行存钱，你不能随便拿起来就话掉了，存银行就要用银行的流程，到时候年底你想要这一年的流水记录也方便啊（顺便告诉你，即使它规定不能用赋值的方式修改state，要用提交mutation的方式，但是你完全可以不听，你的钱，你存的状态，你随便，但是出现问题别怪银行，出了问题只能你自己去排查）所以，你就听话得了
（4）actions:该属性就是用来处理异步的，比如你想过一会修改state，那么你就过一会在从action里修改state,这个“过一会”的逻辑你也许想写在mutations里也可以啊，（可以是可以，但是银行就是银行，请按正规流程办事，让你写在action里没错，不然你要流水记录的时候可就不好说了）所以请写在actions里定义的方法里，记住，“过一会”之后要用提交mutation的方式修改state,切记！
是时候上代码了
const store = new vueRouter({
state:{
num:1
},
getters:{
addNum(state){
return state.num+1
}
},
mutations:{
changeNum(state){
state.num = 9
}
}，
actions:{
witChange(context){
//context 是一个对象，vuex提供的，里边有commit等方法，你可以打印出来看 看，这里你要知道这么写就行，通过context.commit()调用mutations里定义的方法。
setTimeout(()=>{
context.commit('changeNum')
},1000)
}
}
})
这就是一个最简单的vuex，最开始你可以这样在store文件夹的index.js里这样定义，那么怎么用呢？
很简单，你在你的组件里这样访问和修改状态
由于你上边已经在vue实力注册过store，所以你可以在组件中这样操作
1.访问state里的num： this.$store.state.num
2.修改state里的num（记住，不能直接修改，要提交mutation，这也是在说怎么用mutation）
this.$stroe.commit('changeNum')
传参这样
this.$stroe.commit('changeNum'，paylode)
你也可以这样
this.$stroe.commit({
type:'changeNum',
paylode
})
3.getters怎么用？
this.$store.getters.addNum
或者你想传参 （你需要在定义getter方法时接收参数）
this.$store.getters.addNum（1），别忘了，这种方式是不会缓存的哦
4.actions 怎么用？
this.$store.dispatch('witChange') .dispatch() 是调用actions里定义的方法的一种方式，也是vuex规定的，记住就行
传参方式：参考调用mutation的传参方式。
写到这里先结束一下，写太多怕你们一下接受不了，但是写到这基本你就知道vuex是啥，怎么简单使用了，后续逐步进阶，我尽量会写的简单明了
写在最后：哪里不合适，希望大神的指导，本人虚心接受，并会及时纠正，感谢您对中国互联网产业的每一次奉献
网友评论