vuex-Mutation(同步)

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation 非常类似于事件：

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})
//type:increment

//提交motations:
store.commit('increment')

//向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：
store.commit('increment', { amount: 10 })

//对象风格的提交方式
store.commit({ type: 'increment', amount: 10 })

 

Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项

1，提前在你的 store 中初始化好所有所需属性
2，在对象上添加新属性
    Vue.set(obj, 'newProp', 123)
    //新对象替换方式
    state.obj = { ...state.obj, newProp: 123 }

//mutation必须是同步函数
//任何在回调函数中进行的状态的改变都是不可追踪的。

 

使用常量作为mutation的事件类型

//常量放在单独的文件中
// 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
    }
  }
})

 

在组件中提交mutation

//可以用this.$store.commit("***");
//可以用mapMutations将组件中的 methods 映射为 store.commit 调用

import { mapMutations } from 'vuex'
export default {
  // ...

  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

 

转载于:https://www.cnblogs.com/avidya/p/8432458.html