uni-app全局变量实现方式:见文档。
方式多种多样,在这里我只对vuex和uni.setStorageSync进行说明。
方式一 :vuex
1.在项目的根目录下创建文件‘store’,并在‘store’中新建index.js(名称随意起)如下:
说明:可以在state中定义你需要的值,需要注意的是‘hasLogin’如果你需要强制用户登录,只需要在需要判断的地方获取hasLogin的值来做不同处理即可!
2把.Vuex挂载到main.js上,如下图:
挂载以后你可以通过this.$store.state.hasLogin获取值。
3.在需要使用的页面引入
说明:computed中的值可以直接通过this.hasLogin获取值。
在登录成功后获取到服务器返回的数据将数据保存在全局变量中.如下图:
4.最后在app.vue中判断是否登录,如果登录就更新全局变量达到保持登录状态效果.
整体流程:在需要登录的界面使用this.$store.state.hasLogin判断是否登录,没有登录就跳转登录页面。,当第二次登录的时候会在app.vue中判断是否登录过 如果没有你就可以开始你的表演了,(比如写个while(true)啥的,先让用户手机卡机看看当地警察的分布再说)。开玩笑,当然是写你想做的事了.比如跳转登录,或者跳转首页等操作!
方式二:利用setStorage进行本地存储方式.
这种方式就显得比较简单易懂了,当用户登录成功后你接收到服务器返回的数据后利用uni.setStorageSync进行本地存储即可,用户退出登录的时候需要uni.clearStorageSync。
在需要登录才能查看的页面调用如下图的方法(声明在main.js):
方式一和方式二的区别:
方式一利用vuex来管理全局变量达到效果,方式二通过本地存储以及获取本地存储来确认是否有登录,心细的朋友都发现了 即便方式一最后还是通过setStorage保存的数据,其实这两种方式都可以使用,不同的区别在于方式一获取的是一个变量的值,方式二你需要在使用的地方获取一次本地缓存,性能方面我不是很了解 但是肯定会有所差异的,作为一个渣渣 这个我不配了解。
项目中建议方式一,因为毕竟是官方推荐的,当然使用方式二也没什么问题。
|
请发表评论