Vuex

专门为vue.js应用开发的状态管理模式 采用集中式存储管理应用状态

原理

• 把组件中的数据 提升到一个全局的地方store 由 Vuex统一管理
• 如果要修改存在 Vuex 中的数据，需要在定义 store 时，定义修改这个数据的方法，这些方法称为 mutation； mutation 函数的第一个参数是 state 对象，所有的数据都定义state中，在 mutation 函数中通过 state 可以修改 上面 state 中的数据；
• 注意 mutation 中修改数据只能使用同步的方式，不能再异步的操作中更新数据；如果有异步就需要使用action；
• action 也是更新数据的方式，action 不同于 mutation 的是 action 可以使用异步，但是更新数据仍然需要 commit 对应的 mutation；

使用步骤

1. 安装
2. 把需要放在Vuex中的数据存在state里面
3. 创建修改这些数据的mutation
4. 若是异步处理更新 创建对应的action 并且在 action 中通过 commit mutation 的方式更新数据 最后导出 Vuex 的 stroe 实例，并且为 Vue 的根实例配置 store 属性，配置 store 属性后，在 Vue 实例中可以通过 this.$store 访问 store
5. 在整个 Vue 的应用中，任何地方需要使用该数据，通过 this.$store.state.属性名 的方式获取数据；
6. 如果需要更新这些数据可以通过调用 this.store.dispatch(action名)

store.js


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // state 就是数据，如果数据定义在 state 中组件中如果要使用这个数据 this.$store.state.属性名 的方式获取
    num: 15
  },
  mutations: {
    // state 中的数据不能被直接修改，如果要修改这些数据，需要使用 mutation，注意 mutation 中不能使用异步更新 state
    add (state) {
      // mutation 函数的第一个参数是 state 对象，所有的数据都定义 state 中，在 mutation 函数中通过 state 可以修改 上面 state 中的数据；
      state.num++
    },
    addNum (state, payload) {
      // mutation 的第二个参数 payload 是在 commit mutation 时传入的参数
      state.num += payload
    }
  },
  actions: {
    // action 可以使用异步，但是更新数据仍然需要 commit 对应的 mutation
    asyncAdd(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  }
})

mapState/mapMountations/mapActions 批量获取多个 state、mutation、action

通过 mapState、mapMutations、mapActions 方法结合展开运算符，可以把对应的数据和方法添加到computed 和 methods 中的，这些数据方法都可以通过 this 实例访问