基于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>
暂无其他大变动