什么是Vuex？
官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
人为理解：Vuex是用来管理组件之间通信的一个插件
为什么要用Vuex？
我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢？嗯..，方法应该有。抛开怎么实现的问题，试想一下，当做中大型项目时，面对一大堆组件之间的通信，还有一大堆的逻辑代码，会不会很抓狂？？那为何不把组件之间共享的数据给“拎”出来，在一定的规则下管理这些数据呢？ 这就是Vuex的基本思想了。
怎么使用Vuex？（安装vuex之后）
import Vue from 'vue'
import Vuex from 'vuex' //引入vuex vuex是基于vue存在的
let store = new Vuex.Store({
state,
mutations,
getters,
actions
})
//创建vuex实例
new Vue({
el: '#app',
router,
store, //并在vue实例中挂载
render: h => h(App)
})
new Vuex.Store({}) 表示创建一个Vuex实例，通常情况下，他需要注入到Vue实例里. Store是Vuex的一个核心方法，字面上理解为“仓库”的意思。Vuex Store是响应式的，当Vue组件从store中读取状态（state选项）时，若store中的状态发生更新时，他会及时的响应给其他的组件（类似双向数据绑定） 而且不能直接改变store的状态，改变状态的唯一方法就是，显式地提交更改（mutations选项）
Vuex有4个核心选项：state mutations getters actions
state的使用 ：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。
let state = {
count : 0,
}
//在state这个对象中存放一个数据
//在标签中用this.$store.state.count输出
<p>
{{this.$store.state.count}}
</p>
mutation的使用 ：在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。 mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）还有一点需要注意：mutations方法必须是同步方法！
//在组件中想要使用方法 给state中的数据+10，但是在method中写的只是改变了视图上的值，并不是数据本身
<p>
{{this.$store.state.count}}
</p>
<p>
<button @click="add">+10</button>
</p>
methods: {
add(){
//将这个方法提交给oadd这个方法
this.$store.commit('oadd',10)
},
},
//在mutations中 写oadd
let mutations = {
oadd(state,n){
state.count+=n
},
}
getters的使用：类似于vue的计算属性
//在state中有一个数组
let state = {
arr : [1,2,3,4,5,6],
}
在getters中这个数组进行逻辑编写
let getters = {
doarr : state=>{
return state.arr.map(item => {
return item*10
});
}
}
在组价中输出
<p>
{{this.$store.getters.doarr}}
</p>
action的使用 ：
actions和mutations的区别
1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。
2.Action 可以包含任意异步操作。
let state = {
color : "red"
} //在state定义一个color数据
//在视图中使用这个颜色数据
<p class="color" :style="{color:this.$store.state.color}">
color
</p>
<p> //点击按钮三秒后换字体颜色
<button @click="change">change</button>
</p>
//先在method中将方法使用disoatch给actions里定义的thechange
methods: {
change(){
this.$store.dispatch('thechange')
}
},
//在mutations中写逻辑代码
let mutations = {
ochange(state){
state.color = "pink"
}
}
//在actions中实现这个异步方法
let actions = {
thechange({commit}){
setTimeout(()=>{
commit('ochange')
},3000)
}
}