Vuex基础(二)

Mutations

1. 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

• 包含多个直接更新 state 的方法(回调函数)的对象
• 被动触发：action 中的 commit('mutation 名称')
• 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
• 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
• 只能包含同步的代码, 不能写异步代码

2. 方法定义与调用

//定义
const mutations = {
    increment (state) {
      // 变更状态
      state.count++
    }
}

//调用触发，一般在action中
store.commit('increment')

3. 向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）

const mutations  = {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

4. 当需要在对象上添加新属性时，两种方法

1. 使用 Vue.set(obj, 'newProp', 123)
2. 以新对象替换老对象。例如，利用对象展开运算符

state.obj = { ...state.obj, newProp: 123 }

5. 组件中提交mutation

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    //数组形式
    ...mapMutations([
      // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      'increment', 

      // `mapMutations` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
      'incrementBy' 
    ]),
    //对象形式，方便取别名
    ...mapMutations({
      // 将 `this.add()` 映射为 `this.$store.commit('increment')`
      add: 'increment' 
    })
  }
}

6. 使用常量定义mutations

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

Actions

1. Action 类似于 mutation，不同在于：

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

2. 定义与调用

//定义
const actions = {
    increment (context) {
      context.commit('increment')
    }
}

//调用，一般在组件methods中
this.$store.dispatch('increment')

3. context 对象

• 调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
• context 对象不是 store 实例本身

4. 组件中分发actions

import { mapActions } from 'vuex'

export default {

  methods: {
    //数组形式
    ...mapActions([
      // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
      'increment', 

      // `mapActions` 也支持载荷
      //将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
      'incrementBy' 
    ]),

    //对象形式
    ...mapActions({
      // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
      add: 'increment' 
    })
  }
}

5. 异步处理的action

• 如何才能组合多个 action，以处理更加复杂的异步流程？
• store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise

//使用Promise函数
actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  },

  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

//使用async / await
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

store.dispatch('actionA').then(() => {
  // ...
})

Modules

......