一、Vuex是什么

    Vuex是专门为Vue.js应用程序设计的状态管理工具。采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态是以一种可以预测的方式发生变化。

1、Vuex的构成

vuex.png

由上图，我们看出Vuex有以下几个部分组成：

1) state

state是存储的单一状态，是存储的基本数据。

2）Getters

getters 是store的计算属性，对state的加工，是派生出来的数据，和computed计算属性类似，getters返回的值会根据它的依赖缓存起来，且当它的依赖值发生改变才会被重新计算。

3) Mutations

mutations提交更变数据，使用store.commit方法更改state的存储状态。

4) Actions

actions像是一个容器，提交mutation，而不是直接改变状态，（actions可以包含任何异步操作）

5) Module

module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

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

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

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

6) 辅助函数

Vuex提供了mapState、mapGetters、mapMoutations、mapActions等辅助函数给开发在vm中处理store。

二、Vuex的使用

import Vuex from 'vuex';
Vue.use(vuex);
const store = new Vuex.Store({
   state,
   getters,
   mutations,
   actions
})