在vue使用时如果你感觉到：

• prop传参的方法对于多层嵌套的组件非常繁琐
• 对于兄弟组件间的数据传递很麻烦
• 即使上述两个问题可以通过某些方法解决，但是不同组件直接引用或者通过事件来变更数据会使你的代码越来越复杂，通常可能会导致无法维护的代码

vuex就是来帮你解决这些问题的。

vuex中包含5个核心概念：State，Getter，Mutation，Action，Module

State

用一句话理解State：State是用来存储原始数据的。
上文提到过多层嵌套和兄弟组件的数据传递很麻烦。所以vuex把你所有用到的数据存储在了一个“变量”上。
State的简单实现：

// store.js
const store = {
	state: {
		commonData: { ... },
		fooData: { ... },
		appData2: { ... },
		...
	}
};

// foo.js
const store = require('./store.js');
Vue.component('foo', {
  data: function () {
    return {
      common: store.state.commonData,
      foo: store.state.fooData
    }
  },
  template: '<div><span>{{common}}</span><span>{{ foo }}</span></div>'
})

// bar.js
const store = require('./store.js');
Vue.component('bar', {
  data: function () {
    return {
   	  common: store.state.commonData,
      bar: store.state.barData
    }
  },
  template: '<div><span>{{common}}</span><span>{{ bar }}</span></div>'
})

foo组件和bar组件现在无论是嵌套还是兄弟组件，都不需要担心数据传递方面的问题了，因为数据都在store.state里，需要用时直接拿来用就可以了。

当然这样做有弊端，就是这个store.state现在谁都可以用，谁都可以改，这样不安全也不好维护。所以Mutation出现了。

Mutation

用一句话理解Mutation：Mutation是用来修改数据的。

直接看官网的例子：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state, num) { // 声明一个叫increment的Mutation
      state.count += num;
    }
  }
});

// 调用上文声明的increment Mutation
store.commit('increment', 10)

mutation是更改 Vuex 的 store.state的唯一方法。
这样将更方面于你管理state，也更符合“封装”的概念。但是需要注意的一点是mutation函数中不许出现异步操作。
如果你想问：那我的ajax要往哪里写？ 请看下文的action。

Action

用一句话理解Action：Action可以用来分发多重 mutation，以及使用异步方法。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    init (state, num) {
      state.count = num;
    }
  },
  actions: {
    init(context, params) {
      ajaxGetOriginNum(params).then(function(originNum) { // 从服务端获取原始数据
        context.commit('init', originNum); // 调用mutation修改state
      }).catch(function() {
        ...
      });
    }
  }
})

// 调用init action
store.dispatch('init', params);

再看一个官网的例子：

actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求，然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

代码是不是清晰了好多。

Getter 和 Module

用一句话理解Getter：Getter允许你在获取数据时，对数据做一些预处理。

用一句话理解Module：Module允许你对一个大的 store 分割成独立的小模块，便于管理。

这两个概念比较简单。这里就不赘述了。大家直接看官方文档吧。

感谢观看。