背景

    vue应用程序开发时，我们经常遇到如何在组件之间传值，父子组件传值可以用prop属性和emit事件来互相传递，但是兄弟组件呢？使用vuex是一种非常简单的方案。

vuex简介

vuex是vue的状态管理模式，用于管理状态，所谓状态可理解为data，需要共享传递的data，这些data在vuex内统一管理维护。

vuex对象

vuex内有五大对象，如下：

　　state：state内定义data，即变量，this.$store.data1。

　　mutations：用于修改状态，同步的，定义修改状态的方法，可以理解为java类的set方法，不允许直接操作state内的变量，this.$store.commit（“方法名”，param）。

　　actions:与mutations类似，不同的是它异步操作，mutations是同步操作，actions内可以提交mutations，不可以直接修改状态。this.$store.dispatch('actions内的方法'，参数)。actions内方法定义有两种，如下：

const actions = {    actionsAddCount(context, n = 0) {        console.log(context)        return context.commit('mutationsAdd', n)    },    actionsReduceCount({ commit }, n = 0) {        return commit('mutationsReduce', n)    }}

　　getters：计算属性，当state内属性变化时重新计算返回属性结果。官方文档解释为store的计算属性。也可以理解为所有组件的计算（computed）属性。

　　modules：这个适用于开发大型项目，需要很多不同类的状态分模块时使用的。

const moduleA = {  state: { ... },  mutations: { ... },  actions: { ... },  getters: { ... }}const moduleB = {  state: { ... },  mutations: { ... },  actions: { ... }}

如何使用

//安装vuex依赖，npm install vuex --save//新建一个vuex的文件，建立一个vuex.js文件。import Vue from 'vue'import Vuex from 'vuex'Vue.use(VueX)const vuex = new VueX.store({   state:{     A:0        }   mutations:{     SET_A(state,n ){      state.A = n      state.A += n    }        }   actions:{     actionA1({commit},n){       return commit('SET_A',n)    }    actionA2(context,n){       return commit('SET_A',n)    }   }    getters : {      getterA(state, n ) {         return (state.A += n)      }    } }) export default vuex

//在vue实例内使用即可 new Vue({
    　　vuex })