Vuex是一个专门服务于Vue.js应用的状态管理工具。适用于中大型应用。Vuex中有一些专有概念需要先了解下：
State：用于数据的存储，是store中的唯一数据源；Getter：类似于计算属性，就是对State中的数据进行二次的处理，比如筛选和对多个数据进行求值等。Mutation：类似事件，是改变Store中数据的唯一途径，只能进行同步操作。Action：类似Mutation，通过提交Mutation来改变数据，而不直接操作State，可以进行异步操作。Module：当业务复杂的时候，可以把store分成多个模块进行管理，便于维护。 对于这几个概念有各种对应的map辅助函数用来简化操作，比如mapState，如下三种写法其实是一个意思，都是为了从state中获取数据，并且通过计算属性返回给组件使用。 computed：{ count（）{ return this.$store.state.count }, ...mapState({ count:state=>state.count }), ...mapState('[count]') }又比如mapMutation，以下两种函数的定义方式要实现的功能是一样的，都是要提交一个mutation去改变state中的数据：
methods:{ increment(){ this.$store.commit("increment"); }, ...mapMutations(['increment']); }接下来就用一个极简的例子来展示Vuex中任意2个组件件的状态管理。1，新建 store
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.State({ state:{ count:0 }, mutation:{ increment(state){ state.count++ }, decrement(state){ state.count-- } } })2.创建一个带store的Vue实例
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './utils/store'; new Vue({ router, store, render : h=> h(App) }).$mount('#app');3.任意组件A实现点击递增
<template> <p @click="increment">click to increment : {{count}}</p> </template> <script> import {mapState,mapMutations} from "vuex" export default { cpmputed:{ ...mapState(['count']) }, methods:{ ...mapMutations(['increment']) } } </script>4.任意组件B实现点击递减
<template> <p @click="decrement">click to decrement : {{count}}</p> </template> <script> import {mapState,mapMutations} from "vuex" export default { cpmputed:{ ...mapState(['count']) }, methods:{ ...mapMutations(['decrement']) } } </script>以上只是用最简单的 vuex 配置去实现组件通信，当然真实项目中的配置肯定会更复杂，比如需要对State数据进行二次筛选会用到Getter，然后如果需要异步的提交那么需要使用Action，再比如如果模块很多，可以将store分模块进行状态管理。对于Vuex更多复杂的操作还是建议去Vuex官方文档看看，然后多写例子。
