vuex mutations修改状态

vuex的Mutation特性（改变store中状态的唯一方法、执行同步操作）

改变store中state状态的唯一方法就是提交mutation，就很类似事件。

每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。

我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。

 $store.commit( ) 

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

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <h3>{{$store.state.a.count}} = {{count}}</h3>
        <div>
            <button @click="$store.commit('add',10)">+</button>
            <button @click="$store.commit('reduce')">-</button>
        </div>
    </div>
</template>

<script>
import store from '../store'

export default{
  data () {
    return {
      msg: 'Hello Vuex'
    }
  },
  computed: {
    count () {
      return this.$store.state.a.count
    }
  },
  store
}
</script>

传值：

当点击+时，想要count的值加10，可以通过$store.commit("add", 10)

store.js文件

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

Vue.use(Vuex)

// state访问状态对象
const state = {
  count: 1
}

// mutations修改状态
const mutations = {
  add (state, n) {
    state.count += n
  },
  reduce (state) {
    state.count--
  }
}


// module模块组
const moduleA = {
  state,
  mutations,
}

export default new Vuex.Store({
  modules: { a: moduleA }
})

模板获取Mutations方法

在实际开发中，我们并不希望$store.commit()方法，而是希望跟调用模板里的方法一样调用

这种实现方式，需要两个步骤

1.在模板count.vue里用import 引入我们的mapMutations：

import { mapState, mapMutations } from 'vuex'

2.在模板的<script>标签里添加methods属性，并加入mapMutations

methods:mapMutations([
    'add', 'reduce'
]),

完整代码段如下：

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <h3>{{$store.state.a.count}} = {{count}}</h3>
        <div>
            <button @click="$store.commit('add',10)">+</button>
            <button @click="$store.commit('reduce')">-</button>
        </div>
        <div>
        <p>
        <button @click="add(10)">add</button>
        <button @click="reduce">add</button>
        </p>
        </div>

    </div>
</template>

<script>
import store from '../store'
import {mapState, mapMutations } from 'vuex'

export default{
  data () {
    return {
      msg: 'Hello Vuex'
    }
  },
  // computed: mapState(["count"]),
  computed: {
    count () {
      return this.$store.state.a.count
    }
  },
  methods: mapMutations(['add', 'reduce']),
  store
}
</script>

简单界面如图：