12-Vuex

vuex 状态管理器（27-vuex状态管理器.html）

作用：将数据交给state集中管理、分发。

应用：用于复杂的页面，一个数据被多个页面或者路由共享（互相交互），或者多层级数据交互时可以使用vuex。

安装：npm install vuex

使用：

  import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);
  const store = new Vuex.Store({
    // ...
  });
  const vm = new Vue({
    el: "#app",
    store
  });

语法：const store = new Vuex.Store({...});

store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：

1. state – 存放状态
2. getters – state的计算属性
3. mutations – 更改状态的逻辑，同步操作
4. actions – 提交mutation，异步操作
5. mudules – 将store模块化

关于store，需要先记住两点：

1. store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；
2. 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

一个完整的store的结构是这样的:

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
  //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

使用vuex mutations 中的方法：
this.$store.commit("mutations中的函数名"，可以跟参数)

使用vuex actions 中的方法：
this.$store.dispatch("actions中的函数名", param);