1.mutations
可以集中监控数据的变化
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count:0
},
getters: {
countgetter(state){
return '这是getter后的值' + state.count;
}
},
mutations: {
add(state) {
state.count++; //无参数,传入state
},
addN(state,step) {
state.count+=step; //有参数,传入state,再传入step需要传递的参数
}
},
actions: {
},
modules: {},
});
mutations的两种使用方式
{{this.$store.state.count}}
<button @click="handleadd">+1</button><br /> //点击按钮,count +1
<button @click="handleaddN(2)">+2</button> //点击按钮 , count + 2(或者n)
//第一种方式
<script>
export default {
data() {
return {};
},
computed: {
},
methods: {
handleadd() {
this.$store.commit("add"); //在methods中this.$store.commit即可使用
},
handleaddN(n) {
this.$store.commit("addN", n); //同上,传参,在方法后加个参数即可,此种方法只能传一个值,如果需要传多个值,写成数组或对象的方式传参即可
},
},
};
</script>
//第二种方式
<script>
import { mapMutations} from "vuex"; //引入mapMutations
export default {
data() {
return {};
},
computed: {
},
methods: {
...mapMutations(['add','addN']), //在methods中...mapMutations , 引入方法
handleaddmap() {
this.add() //直接调用从mapMutations中引入的方法即可
},
handleaddNmap(n) {
this.addN(n) //需要传参,在调用方法时传参即可
},
},
};
</script>