vuex

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

核心概念

store
vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。
state
state上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。另外有些状态是组件私有的状态，称为组件的局部状态，我们不需要把这部分状态放在store中去。
getters
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。此时可以用到getters，getters可以看作是store的计算属性，其参数为state
mutations
mutations里面是如何更改state中状态的逻辑。更改Vuex中的state的唯一方法是，提交mutation，即store.commit(‘increment’)。
actions
因为mutations中只能是同步操作，但是在实际的项目中，会有异步操作，那么actions就是为了异步操作而设置的。这样，就变成了在action中去提交mutation，然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数，而mutations则是用commit函数。

store仓库定义：

const home = {
  state: {
    pageSize: 0,
    setLanguage: '',
  },
  getters: {
    pageSizeCom: (state) => {
      return state.pageSize+1;
    },
  },
  mutations: {
    [PAGE_SIZE](state, status) {
      state.pageSize = status;
    },
    [SET_LANGUAGE](state, setLanguage) {
      localStorage.setItem('language', setLanguage);
      state.setLanguage = setLanguage;
    },
  },
  actions: {
    set_language({commit}, setLanguage) {
      commit(SET_LANGUAGE, setLanguage);
    },
    set_pageSize({commit}, pageSize) {
      return new Promise((resolve, reject) => {
        if (pageSize===1) {
          commit(PAGE_SIZE, pageSize);
          resolve('chenggong');
        } else {
          reject(error);
        }
      });
    },
  },
};

使用：

import {mapState, mapGetters} from 'vuex';//导入辅助函数

computed: {
    // 组件私有的计算属性
    dd() {
      return 2;
    },
    // 拿state的数据,对应的是从vuex的计算属性
    ...mapState({
      pageSize: (state) => state.home.pageSize,
      pageSizeCopy: function(state) {
        return state.home.pageSize+this.dd;
      },
    }),
    // 拿getters的数据,对应的是从vuex的计算属性
    ...mapGetters({
      pageSizeCom: 'pageSizeCom',
    }),
  },

this.$store.dispatch('set_pageSize', 1).then((value)=>{
      console.log(value);
    }, (error)=>{
      console.log(error);
    });