vue-vuex中使用commit提交mutation来修改state的方法详解

当我们使用Vue.js + Vuex进行项目开发时，我们需要通过commit提交mutation来修改state。以下是使用commit提交mutation修改state的详细步骤：

1. 创建Vuex Store

我们首先要在项目中创建Vuex Store，Store是一个对象，包含着我们需要管理的状态（state）、变更状态的方法（actions、mutations），以及一些获取状态的方法（getters）。

以下是创建Vuex Store的示例代码：

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

在上面的示例代码中，我们定义了一个状态 count，和一个用来增加 count 值的 mutate 方法 increment， 目前我们只定义了一个 mutation，用于增加 count 的值。

2. 在组件中引入store

在组件中引入store，我们可以通过$store对象来访问state中的值， 以及通过commit提交mutation来修改state中的值。我们需要在script标签内引入store文件，如下所示：

<template>
  <div>
    {{ count }}
    <button @click="increment">Increase</button>
  </div>
</template>

<script>
  import store from './store'

  export default {
    computed: {
      count () {
        return this.$store.state.count
      }
    },
    methods: {
      increment () {
        this.$store.commit('increment')
      }
    }
  }
</script>

在上面的示例代码中，我们通过计算属性computed来获取state中的值，并通过methods方法的increment方法来提交mutation修改state的值。

3. 提交Mutation来修改State

提交Mutation修改state的值，需要通过commit方法提交Mutation，Mutation中包含名称、函数两个参数，操作state时需要通过函数来修改state的值。

以下是两个使用commit提交mutation修改state的示例：

mutations: {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

export default mutations

在上面的示例代码中，我们分别创建了两个Mutation，使用increment方法来增加count的值，使用decrement方法来减少count的值。

methods: {
  increment () {
    this.$store.commit('increment')
  },
  decrement () {
    this.$store.commit('decrement')
  }
}

export default methods

在上面的示例代码中，我们分别创建了两个methods，使用increment方法来提交increment Mutation，使用decrement方法来提交decrement Mutation，从而修改state中的值。

以上就是使用commit提交mutation来修改state的方法详解。通过commit方法来修改state的值，是Vuex中管理状态的核心所在。