Vuex学习总结

4.Vuex核心概念

4.3 Mutations

改变Vuex实例中的状态的唯一方法是提交mutation。
在Vuex学习总结（2）的Vuex入门这里已经演示了如何提交mutation。

在提交mutation时可以带参数。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1,
  },
  mutations: {
    incrementBy(state, n) {
      state.count += n
    },
  },
})

<template>
    <div>
        <button @click="incrementBy">加三</button> {{count}}
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: "Counter",
        computed: {
            ...mapState(['count']),
        },
        methods: {
            incrementBy() {
                this.$store.commit('incrementBy', 3)
            }
        }
    }
</script>

提交mutation时的参数可以是一个对象。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1,
  },
  mutations: {
    incrementBy(state, payload) {
        state.count += payload.amount
    },
  },
})

<template>
    <div>
        <button @click="incrementBy">加三</button> {{count}}
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: "Counter",
        computed: {
            ...mapState(['count']),
        },
        methods: {
            incrementBy() {
                this.$store.commit('incrementBy', {amount: 3})
            }
        }
    }
</script>

提交mutation还可以像下面这样。

this.$store.commit({type: 'incrementBy', amount: 10})

使用mapMutations。

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

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

    export default {
        name: "Counter",
        computed: {
            ...mapState(['count']),
        },
        methods: mapMutations(['increment'])
    }
</script>

往Vuex实例的state属性添加数据。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    people: {
        name: '张三',
    },
  },
})

<template>
  <div class="home">
    {{this.$store.state.people}} <button @click="addAge">添加年龄</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    addAge() {
      this.$store.state.people = {...this.$store.state.people, age: 20}
    },
  },
}
</script>

将本地方法与mapMutations合并的方法。

<template>
    <div>
        <button @click="increment">加一</button> {{count}}
        <button @click="add">加一</button> {{count}}
    </div>
</template>

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

    export default {
        name: "Counter",
        computed: {
            ...mapState(['count']),
        },
        methods: {
            ...mapMutations(['increment']),
            ...mapMutations({
                add: 'increment'
            })
        }
    }
</script>

在Vuex中，mutations是同步事务，因为当两个异步回调同时改变一个状态时，不知道那个异步回调先执行完，这样就无法跟踪状态的变化。就像在JavaScript中，先后写两个Ajax，你不知道哪个Ajax先执行完。
参考：