基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化

1.vue/index.js//在vuex中配置主要用到togglepage2，第十六到第十八
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
id: 0,
showpage2: true,
showpage1:true,
},
mutations: {
setid(state, n) {
console.log(n);
state.id = n.id;
},
togglepage2(state) {
state.showpage2 = !state.showpage2;
},
togglepage1(state)
{
state.showpage1=!state.showpage1;
}
},
actions: {
setid(context, m) {
setTimeout(() => {
context.commit({
type: "setid",
id: m.id
})
}, 1000)
}
}
})
export default store;

2.page2.vuex：第50到54计算属性，在用watch去监听，变相的实现监听vuex内部state变化
<template>
<div class="page2">
<button @click="togglepage2">点击切换</button>
</div>
</template>

<script>
export default {
name: 'page2',
data() {
return {}
},
computed: {
listenshowpage1() {
return this.$store.state.showpage2;
}
},
watch: {
listenshowpage1: function(a, b) {
console.log("修改前卫：" + a);
console.log("修改后为：" + b);
}
},
methods:{
togglepage2:function(){
this.$store.commit({
type:"togglepage2"
})
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
暂无其他大变动