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

vuex工作原理.png

1. Getter

getter可以对 state 中的数据进行过滤、处理。
类似是Vue中的computed计算属性，也具有缓存功能。
如果state中的数据得到了改变，那么getters中的属性的值也会发生改变，如果state的值没有发生任何变化，那么getters中的属性的值就不会发生改变。

const store = createStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: (state) => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
复制代码

mapGetters 辅助函数

mapGetters 辅助函数是将 getter 映射到局部计算属性。

import { mapGetters } from 'vuex'

export default {
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter'
    ])
  }
}
复制代码

2. Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
mutation 必须是同步函数。否则会造成数据混乱。
可以在组件中使用 this.$store.commit('xxx') 提交 mutation 。

3. Action

Action 可以包含任意异步操作。

//index.js
  mutations: {
    /* mutations通过payload来接收commit传过来的参数  */
    ADD(state, payload) {
      state.num += payload;
    }
  },
  actions: {
    /* 异步请求要放在actions方法中去写
    不要再组件里去写，不然就起不到作用 */
    addajax: function ({ commit }, data) {
      setTimeout(() => {
        /* 使用解构出来的commit方法来
        提交一个mutations方法ADD来修改
        state中的值 */
        commit('ADD', data)
      }, 500)
    }
  },
复制代码

//App.vue
  methods:{
    add(){
      this.$store.dispatch('addajax',this.num)
    }
  }

Vuex基本使用

1. Getter

mapGetters 辅助函数

2. Mutation

3. Action