vuex是一个专门为vue.js设计的状态管理模式，并且也可以使用devtools进行调试，可以多个组件共享状态。简单来说，就是共享的状态用state来存放，用mutations来操作state，但是需要用store.commit来主动式的操作mutations。
用一个简单的demo来认识vuex。
注意在使用vuex之前要先安装依赖（前提是已经用Vue脚手架工具构建好项目）
cnpm install vuex –save
在入口文件main.js里需要引入vuex、注册vuex、实例化store、把store放在全局的实例化对象里。
import Vue from 'vue' import App from './App' //1.引入vuex import Vuex from 'vuex' import Apple from './components/Apple' import Banana from './components/Banana' Vue.config.productionTip = false //2.注册 Vue.use(Vuex); //3.实例化store let store=new Vuex.Store({ state:{ totalPrice:0 }, mutations:{ increment(state,price){ state.totalPrice+=price }, decrement(state,price){ state.totalPrice-=price } }, actions:{ increase (context,price){ context.commit('increment',price) }, decrease (context,price){ context.commit('decrement',price) } }, getters:{ discount(state){ return state.totalPrice *0.8; } } }) new Vue({ el: '#app', //4.把store放在全局的实例化对象里,可以在全局的所有地方用 store, components: { App}, template: '<App/>' })
实例化store时，用到了state，mutations，actions，getters参数，下面来单独介绍 它们：
state
vuex使用单一状态树，那么就可以用一个对象来包含全部的应用层级状态。所以state就作为数据源。mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。不能直接调用一个 mutation handler，这个选项更像是事件注册：“当触发一个type为 increment的 mutation 时，调用此handler。”要唤醒一个 mutation handler，需要调用 store.commit 方法触发相应的 type 。可以向store.commit传入额外的参数这个参数就叫做mutations的载荷。 在更多的情况下，载荷应该是一个对象。这样可以包含更多的字段。mutations必须是同步函数。那我们如何来异步的更新state呢？答案是actions。
actions
actions类似于 mutations 不同的是：
actions 提交的是mutations，而不是直接变更状态,这也就形成了 actions —— mutations —— state 的过程。
actions 可以包含任意异步操作。
action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用context.commit提交一个 mutation，或者通过context.state和context.getters来获取 state 和 getters。但是如何触发呢？答案： store.dispatch
getters有时候我们需要从 store 中的 state 中派生出一些状态，getter 会暴露为 store.getters 对象在组件中使用。
modules
除了上边用到的4个参数，store还有另一个参数：modules。
vuex允许把store进行一个功能拆分，分割成不同的模块（module）。每个模块都拥有自己的store，mutations，action，getters。
App.vue
<template>
<div id="app">
<Apple></Apple>
<Banana></Banana>
<p> 总价{{totalPrice}}</p>
<p> 折后价：{{discountPrice}}</p>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import Apple from './components/Apple'
import Banana from './components/Banana'
export default {
name: 'App',
components: {
HelloWorld,
Apple,
Banana
},
computed:{
totalPrice(){
//由于vuex的状态存储是响应式的，所以从store实例中读取状态的最简单方法就是使用计算属性来返回某个状态：
return this.$store.state.totalPrice
},
discountPrice(){
//getter 会暴露为 store.getters 对象
return this.$store.getters.discount
}
}
}
</script>
由于vuex的状态存储是响应式的，所以从store实例中读取状态的最简单方法就是使用计算属性来返回某个状态：store.state.totalPrice
getters 会暴露为 store.getters 对象：用store.getters.discount可以获取到getter里discount对state计算后的结果
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性。
import { mapState } from 'vuex'
computed: { ...mapState(['totalPrice']) ... }
Banana.vue
<template>
<div>
<p>{{msg}} 单价{{price}}</p>
<button @click="addOne">add one</button>
<button @click="minusOne">minus one</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'banana',
price:15
}
},
methods:{
addOne(){
//直接commit一个mutation
this.$store.commit('increment',this.price)
},
minusOne(){
this.$store.commit('decrement',this.price)
}
}
}
</script>
addOne()函数里调用 store.commit 方法触发 type为"increment"的mutation；minusOne()函数里调用 store.commit 方法触发 type为"decrement"的mutation。
可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。
methods:{ addOne(){ this.increment(this.price) }, minusOne(){ this.decrement(this.price) }, ...mapMutations(['increment', 'decrement']) }
Apple.vue
<template>
<div>
<p> {{msg}}单价：{{price}} </p>
<button @click="addOne">add one</button>
<button @click="minusOne">minus one</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'apple',
price:5
}
},
methods:{
addOne(){
//dispatch一个action，以action作为一个中介再去commit一个mutation
this.$store.dispatch('increase',this.price)
},
minusOne(){
this.$store.dispatch('decrease',this.price)
}
}
}
</script>
addOne()函数里调用 store.dispatch方法触发名为"increase"的action,对应的，在increase这个action里再去调用 context.commit方法触发 type为"increment"的mutation;minusOne()函数里调用 store.dispatch方法触发名为"decrease"的action,对应的，在decrease这个action里再去调用context.commit方法触发 type为"decrement"的mutation。action相当于中介。
mutations和actions的区别与联系：
action只能调用mutation不能直接更改state，执行 action 来分发 (dispatch) 事件通知 store 去改变。
action里可以进行一些异步的操作，再去触发mutation 。
mutation里必须是同步的触发操作state。