Vuex 食用方法

文中提到的所有‘状态’通指store实例中的state中的内容，根组件注册了 store，下面是 store 的五大对象

State

store 实例的 state 对象是所有状态的容器。Vuex 的状态存储是响应式的，子组件从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态（通过this.$store获取store）

computed: {
    count () {
        return this.$store.state.count //获取store中的count状态
    }
}

vuex 提供 mapState 辅助函数简化状态的获取方式，返回 computed 使用的对象，可以通过展开实现与本地计算属性混用

import {mapState} from 'vuex'

computed: {
    ...mapState({
        //箭头函数，第一个参数接受store的state
        count: state => state.count,

        // 获取count状态并为其起别名countAlias
        countAlias: 'count',

        // 为了能够使用 `this` 获取局部状态，必须使用常规函数
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
    })
    ...mapState(['count'])//如果同名并且只要原值，可以直接传入字符串数组
}

Getter

相当与 store 自己的计算属性，能够缓存并动态变化。Getter 接受 state 作为其第一个参数,接受 getters 作为第二个参数：

getters: {
    squareCount: state => {
        return state.count * state.count
    },
    //可以接受其他 getter 作为第二个参数
    cubicCount: (state, getters) => {
        return state.count * getters.squareCount
    }
}

子组件使用 getter 同样以计算属性获取

computed: {
    doneTodosCount () {
        return this.$store.getters.cubicCount
    }
}

可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的对象数组进行查询时非常有用。

getters: {
    getItemById: (state) => (id) => {
        return state.array.find(item => item.id === id)
    }
}

vuex 提供 mapGetters 辅助函数简化getter的获取方式

import { mapGetters } from 'vuex'
computed: {
//起别名
    ...mapGetters({
    cc:'cubicCount'
    })
//不起别名
    ...mapGetters([
    'cubicCount'
    ])
}

Mutation

要修改 store 中的状态时需要通过 mutation 进行提交，mutation 只支持同步操作。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个回调函数 (handler)。mutation 接收 state 作为第一个参数，用户参数作为第二个参数

mutations: {
    addCount (state, params) {//用户参数通常是一个对象
    state.count += params.num
    }
}

通过store.commit('addCount',{num:2})提交 mutation

mutation 需要遵循 vue 的响应规则

• 最好提前在你的 store 中初始化好所有所需属性
• 当需要在对象上添加新属性时，使用Vue.set(obj, 'newProp', 123)或以新对象代替旧对象

vuex 提供 mapMutations 辅助函数简化 mutation 的映射如

import {mapMutations} from 'vuex'
methods:{
    ...mapMutations({
        add: 'addCount' // 将 `this.add(params)` 映射为 `this.$store.commit('addCount',params)`
    })
    ...mapMutations([
        'addCount' //同名映射
    ])
}

Action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象作为第一参数，接受用户参数作为第二参数，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters

actions: {
    increment ({ commit, state }, params) {//对第一个参数(context)进行解构方便commit的调用
        commit('addCount', params)
    }
}

Action 通过 store.dispatch 方法触发如：store.dispatch('increment',{num:2})

vuex 提供 mapActions 辅助函数简化 action 的映射如

import {mapActions} from 'vuex'
methods:{
    ...mapActions({
        inc: 'increment' // 将 `this.inc(params)` 映射为 `this.$store.dispatch('increment',params)`
    })
    ...mapActions([
        'increment' //同名映射
    ])
}

---

异步

store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  },
//然后就可以 `store.dispatch('actionA').then(() => {})`
// 可以嵌套调用
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

Module

过于繁多且复杂，请 转官网 (滑稽)