Vuex很简单，一看就会

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

• vuex 是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。
• 每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

主要特点：

（1）.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

（2）.改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样可以方便地跟踪每一个状态的变化。

Vuex 有5个方法：

state∶ 页面状态管理容器对象。集中存储Vuecomponents中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。

// src/store中
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: '张三',
    number: 0,
    list: [
      { id: 1, name: '111' },
      { id: 2, name: '222' },
      { id: 3, name: '333' },
    ],
  },
});

export default store;

// 使用组件中
// 方法一、解构（方便）
<script>
import { mapState } from 'vuex';
export default {
  mounted() {
    console.log(this.name);
  },
  computed: {
    ...mapState(['name']),
  },
};
</script>
// 方法二、
export default {
  mounted() {
    console.log(this.$store.state.name);
  },
};

mutations∶状态改变操作方法。是Vuex修改state的唯一方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。

actions∶ 操作行为处理模块。负责处理Vue组件接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。

getters∶ state对象读取方法。Vue Components通过该方法读取全局state对象。 官方建议： 是不是每次都写this.$store.getters.XXX让你感到厌烦，你实在不想写这个东西怎么办，当然有解决方案，官方建议我们可以使用mapGetters去解构到计算属性中，就像使用mapState一样，就可以直接使用this调用了

//src/store中
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: '张三',
    number: 0,
    list: [
      { id: 1, name: '111' },
      { id: 2, name: '222' },
      { id: 3, name: '333' },
    ],
  },
  // 在store对象中增加getters属性
  getters: {
    getMessage(state) {
      // 获取修饰后的name，第一个参数state为必要参数，必须写在形参上
      return `hello${state.name}`;
    },
  }
});

export default store;

// 方法一、解构（方便）
<script>
import { mapState，mapGetters } from 'vuex';
export default {
  mounted() {
    console.log(this.name);
  },
  computed: {
    ...mapState(['name']),
    ...mapGetters(['getMessage']),
  },
};
</script>
// 方法二、
export default {
  mounted() {
    console.log(this.$store.state.name);
    console.log(this.$store.getters.getMessage);
  },
};

module 其实只是解决了当 state 中很复杂臃肿的时候，module 可以将 store 分割成模块，每个模块中拥有自己的 state、mutation、action和 getter

注意： action通过context.commit('mutations中的方法名'，传递给方法的数据)方法调用mutations中的方法;vue组件通过this.$store.dispatch('action中的方法名'，传递给方法的数据)方法调用action中的方法

总结

1. 修改state状态必须通过mutations
2. mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
3. 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
4. state的状态即共享数据可以在组件中引用
5. 组件中可以调用action