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>
简单界面如图: