vuex的作用讲解（Vuex入门核心概念3.Mutation）
Mutation用于修改变更$store中的数据（唯一的方式）
mapMutations映射 store 中的方法，通过 commit 调用
示例store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
word: '加油',
},
mutations: {
addSurprise(state) {
state.word = '!'
},
addHappy(state) {
state.word = '~'
},
}
})
LinHongcun.vue
<template>
<section>
<div>{{word}}</div>
<button @click="addSurpriseHere"> !</button>
<button @click="addHappy"> ~</button>
</section>
</template>
<script>
import {
mapState,
mapMutations,
mapActions,
mapGetters
} from 'vuex'
export default {
computed: {
...mapState(['word']),
},
methods: {
...mapMutations(['addHappy']),
addSurpriseHere() {
this.$store.commit('addSurprise')
}
}
}
</script>
<style>
</style>
mutation只能实现同步变更state对象。如果需要实现异步（如通过ajax）变更，那么应该使用action。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
