一.什么是VueX
官方的解释： Vuex是一个专为Vue.js应用程序开发的状态管理模式
当项目比较庞大的时候，每个组件的状态比较多，为了方便管理，需要把组件中的状态抽取出来，放入Vuex中进行统一管理。
接下来夹带私货：
笔者自己本身学习VueX的时候，就是把VueX当成了EventBus的增强版（不知道EventBus的同学可以看看我之前的博文）。VueX帮助我解决了两个问题：
（1）组件之间高频率的传值（高频率的发射事件，接收事件或值）
（2）开辟出可以存储公共数据的地方（正如我的标题，这是数据的家，而不仅仅是一辆bus）
因此我在Eventbus那篇博文中说到VueX是我认为的最稳定的传值方法，因为数据并不在任何一个组件上
二.如何使用VueX
说到VueX就绕不开这张图了
说实话笔者自己在读官方文档时也是一头雾水，结合着自己的实践，在这里给大家一种更好的理解方式：
State：数据仓库，存储公用数据的地方
Mutations：更改State中数据的方法，记住这里写方法！
Actions：控制异步操作，可以让Mutations里的方法缓慢执行，记住只有需要异步操作的时候你才用这个！（你不会问我什么是异步吧？）
三.store.js
我们直接上手，找到项目文件中的store.js（这就是你操作VueX的地方）写下以下代码：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0
},
mutations: {
add(state){
state.count++
},
decrease(state){
state.count--
}
},
actions: {
delayadd(context){
setTimeout(() => {
context.commit('add')
}, 1000);
}
}
})
看看我们干了些什么
首先我们存储了一个公用数据：
count
其次我们定义了两个更改数据的方法
add（）和decrease（） 会自动跟随一个参数state
最后我们定义了一个异步操作
delayadd（）会自动跟随一个参数context
延缓add执行的时间
四.调用State
需要在组件上使用count，怎么办呢？
在组件上调用state里的数据需要借助computed，先说个简单的
看代码：
computed:{
count(){
return this.$store.state.count
}
}
这里大家可以把$store看成一个对象，这个对象就是你刚才操作的store.js，因此调用属性是不是很熟悉？
当然了还有更简单的方法
看代码：
import { mapState } from 'vuex'
export default {
name:'parent',
computed:{
...mapState({
count:'count'
})
}
}
vue给了我们一个辅助函数mapState，可以将state里的数据直接映射进computed，当然你要先引入。
既然我们映射来的也是一个对象那么我们就可以用展开运算符
这种在我们数据较多的时候十分好用
五.调用Mutations
我们在组件里给个button，点击之后count+1，这如何实现呢？
惯例，先说个简单的
<button @click="add">增加</button>
methods:{
add(){
this.$store.commit('add')
}
}
有了第四节的经验，上述代码大家应该很好理解，需要注意的是调用mutations里的方法需要使用commit方法
那可不可以映射呢？
答案是可以的
上代码
import { mapMutations } from 'vuex'
methods:{
...mapMutations({
add: 'add'
})
}
同样的这在方法比较多的时候用起来很爽
六.调用Actions
最后，如果想在组件上点击button，之后延缓1s，count再增加，如何实现呢？
这就需要调用actions了，惯例先来个简单的
methods:{
add(){
this.$store.dispatch("delayadd")
}
}
把add这个方法绑定到button的click事件上就可以看到效果，这里调用actions用dispatch方法
你问我这有没有映射呢？
巧了，还真有
什么?你要看代码！
去找官方文档上找吧，哈哈哈哈0.0
总结
最后我们再来看看我们之前的定义
官方的解释： Vuex是一个专为Vue.js应用程序开发的状态管理模式
当项目比较庞大的时候，每个组件的状态比较多，为了方便管理，需要把组件中的状态抽取出来，放入Vuex中进行统一管理。
其实就是把公共的数据和操纵数据的方法从组件里抽出来，只不过抽的更细，把异步操作放到了actions里。
是不是很简单？所以，今天你学废了嘛？
