首页 > 代码库 > VueX(2)mutation

VueX(2)mutation

2024-10-06 11:19:39   214人阅读

Mutations:

一：作用：
我们使用mutations用来改变store中state的状态：

代码如下：

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

代码如上：

我们可以看到，使用了mutations我们改变了state.count的大小.

二：调用

那么我们要如何调用这个 incremen事件呢？

使用代码如下我们可以调用函数：

store.commit(‘increment‘)　　

如上：

我们可以向store.comit提交载荷（payload）

这个载荷的意思其实是传输额外的参数

 mutations: {
    increment (state,n) {
      // 变更状态
      state.count+=n
    }
  }　　

通过 commit来提交载荷（额外的参数）

store.commit(‘increment‘,10)　　

代码如上：

三：组件中提交：

我们是如何通过组件中提交的呢？

我们通过  this.$store.commit(‘increment‘)来进行提交。

或者使用mapMutations来将组件中的mehods映射为 store.commit来调用

代码如下：

import { mapMutations } from ‘vuex‘

export default {
  // ...
  methods: {
    ...mapMutations([
      ‘increment‘ // 映射 this.increment() 为 this.$store.commit(‘increment‘)
    ]),
    ...mapMutations({
      add: ‘increment‘ // 映射 this.add() 为 this.$store.commit(‘increment‘)
    })
  }
}　　

如上：

 

VueX(2)mutation


联系
我们