如何通过Vuex的Mutations实现状态修改操作？

本文共计909个文字，预计阅读时间需要4分钟。

上一节是读取状态，这一节是修改状态。如何使用Mutations。

1. 使用Vuex提供的commit方法来修改状态。

2.store.js文件中定义mutations对象。

3.在b中：

javascript

const mutations={ add(state) { state.count++; }, reduce(state) { state.count--; }}

上篇是读取state，这篇是修改状态。即如何操作Mutations。

一. $store.commit( )

Vuex提供了commit方法来修改状态

1.store.js文件

const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- } }

2.在button上的修改方法

<button @click="$store.commit('add')">+</button>

<button @click="$store.commit('reduce')">-</button>

二. 传值

最简单的修改状态的操作，在实际项目中我们常常需要在修改状态时传值。比如上边的例子，是我们每次只加1，而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数，并在commit的时候传递就就可以了。