1、关于mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,每个 mutation 都有一个事件类型和 一个回调函数。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,代码如下:
store.js:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state, obj) {
state.count ++;
},
reduction(state, obj) {
state.count --;
}
}
});
export default store;
组件中应用:
<template>
<div id="salary-list-second">
<button @click="incrementFun">+</button>
<button @click="reductionFun">-</button>
<p>{{currentCount}}</p>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "salary-list-second",
computed: mapState({
currentCount: state => state.count
}),
methods: {
incrementFun() {
this.$store.commit("increment");
},
reductionFun() {
this.$store.commit("reduction");
}
}
};
</script>
<style>
button {
padding: 0.2rem;
}
p {
line-height: 0.5rem;
}
</style>