vue 2.0 对应vuex的commit用法

在 Vue.js 2.0 中,commit 方法通常与 Vuex(Vue 的状态管理模式 + 库)一起使用,用于触发 mutation(更改 Vuex store 中的状态的唯一方法)。Vuex 是 Vue.js 应用程序的状态管理模式和库,它集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

基本用法

在 Vuex 中,commit 方法用于提交一个 mutation,这个 mutation 是一个用于改变 store 状态的函数。你可以通过调用 store.commit() 方法来触发 mutation。

// 定义一个 mutation  
const mutations = {  
  increment (state) {  
    state.count++  
  }  
}  
  
// 提交 mutation  
store.commit('increment')

传递参数

commit 方法也可以接受额外的参数,这些参数会被当作 payload(载荷)传给 mutation 函数。

// 带参数的 mutation  
const mutations = {  
  incrementBy (state, amount) {  
    state.count += amount  
  }  
}  
  
// 提交带参数的 mutation  
store.commit('incrementBy', 10)

在组件中提交 Mutation

在 Vue 组件中,你可以通过 this.$store.commit() 来提交 mutation。但是,在 Vuex 3.x 中,推荐使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(尽管这一特性不是 Vue 2.0 特有的,但它同样适用于 Vue 2.x 中的 Vuex)。

import { mapMutations } from 'vuex'  
  
export default {  
  // ...  
  methods: {  
    ...mapMutations([  
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`  
  
      // 传递额外参数  
      'incrementBy' // `incrementBy` 需要在组件的 methods 中单独定义  
    ]),  
    ...mapMutations({  
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`  
    }),  
    incrementByAmount(amount) {  
      this.incrementBy(amount) // 调用映射的方法  
    }  
  }  
}

注意

  • 直接改变 store 中的状态是不被允许的,唯一改变状态的方式是通过提交 mutation
  • 如果你的应用包含异步操作,那么你应该使用 action 而不是 mutation 来处理异步逻辑,action 可以包含任意异步操作,并通过 context.commit 提交一个 mutation 来改变状态。
  • Vuex 3.x 提供了更多现代化的特性和改进,但在 Vue 2.0 项目中,Vuex 2.x 仍然是完全兼容的。

希望这能帮助你理解 Vue 2.0 中 Vuex 的 commit 方法的用法!

你可能感兴趣的:(vue.js,前端,javascript)