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里的事件出现退出成功的提示