uniapp中利用监视vuex中state数据配合uview实现登录消息提示

先看效果图

登录成功或者退出成功都能够给用户提示，提示用户体验！
uview的顶部消息提示详情可见u-top-tips

设计思路

首先是页面的布局
是将顶部消息提示写在了个人详情页内

<u-top-tips ref="loginTips"></u-top-tips>

然后又要显示退出信息，考虑到简洁性，我把显示提示框封装成了methods内的一个方法

showLoginModal(title, type) {
	this.$refs.loginTips.show({
			title,
			type,
			duration: '2000'
		})
}

Vuex状态管理
接下来就是把登录状态定义在vuex内的state了
state数据

在mutations定义一个方法用来控制登录状态
mutations

在用户点击登录并且成功授权后commit整个ADDSERINFO，就处于成功的登录状态了（是处于登录页面来触发的注意不是在个人详情页！）

methods: {
	...mapMutations(["ADDUSERINFO"]),
	// 登录
	goLogin() {
		const that = this
		.........
		.........
		that.ADDUSERINFO(that.userInfo)
		// 返回上一页
		that.$Router.back(1)
				},
		.........
		.........
		}
},

在uni.getUserProfile方法内this指向并不是本页面所以一开始用了
const that = this
来改正指向
到这里已经将登录状态已经改了，我的做法是通过监视属性来检测vuex中state数据的变化的

监视vuex数据变化

在哪触发事件就在哪监测数据，所以我是在个人页面来监测登录状态的变化，这里我配合了计算属性来拿到登录状态，直接拿或者用data定义的数据接收，都好像会失去state的数据响应式，监测不到变化
类似这样，监测不到state的变化

通过计算属性那state数据

watch: {
	// 监视登录状态的变化，出现对应的消息提示
	isLogin(val) {
		// 登录成功提示
		if(val){
			this.showLoginModal("登录成功", "success")
		}
		// 成功退出提示
		else{
			this.showLoginModal("您已成功退出账号", "info")
		}
	}
},
computed: {
	...mapState(["isLogin"])
},

这样就能成功监视登录状态的改变了，只要是改变为登录状态就提示登录成功，不然就是退出账号的情况会触发登录状态的改变了

退出登录

我是在个人页面设置了一个点击事件，点击后出现模态框确认就能够提交退出的mutation了

loginOut() {
	this.DELUSERINFO()
},

mutations

DELUSERINFO(state){
		state.userInfo={}
		state.isLogin=false
},

这样登录状态又变成false，触发watch里的事件出现退出成功的提示