uni-app 保持登录状态 (Vuex)

在小程序中,保持登录状态是很常见的需求,今天就把写一写使用uni-app框架的保持登录状态功能是怎样实现的。

一、场景需求

1、场景:初始打开---登陆---关闭,再次打开---(已登录)上次关闭前的页面

2、cookie:传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态,但是uni-app不支持对cookie的读写。

3、实现:uni-app 的官网的API 有这样一栏“数据缓存”,而且uni-app框架的主体是 VUE,那么我们就用 uni.setStorage 和  vuex  进行登录状态管理。

二、实现过程

1、vuex的声明和使用 请看 《uni-app 使用Vuex+ (强制)登录

2、在store/index.js 中

3、在App.vue 

  每次进入应用前,由App.vue 中的周期函数进行监听,所以在加载函数中定义方法,从本地缓存中取出用户数据,然后调用login方法,不需要发起网络登录请求。

 

这样就实现了,只有不清除本地缓存,每次打开小程序应用时,都是登录状态

三、总结

看到文档,有同步和异步这两种缓存数据,那么关于同步缓存和异步缓存的区别:
以Sync结尾的都是都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。
通俗点说,同步就是你下步操作需要上一步必须完成才能往下执行,异步就是下面的代码和这个操作没什么关系就用异步啦。
使用异步,性能会更好;而使用同步,数据会更安全。

1、所以在App.vue中,先是使用了let userInfo  = uni.getStorageInfoSync('userInfo')||''; 同步去获取缓存的数据,因为后续的操作依赖于更改storage后的数据,则需要同步。

2、在使用setStorageSync和setStorage的时发现setStorageSync不能传入对象

转载于:https://www.cnblogs.com/qiu-Ann/p/11346854.html

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app中,可以通过Vuex来引入状态。 1. 在src目录下新建一个store文件夹,并在store文件夹中新建一个index.js文件,代码如下: ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ }, decrement (state) { state.count-- } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount: state => { return state.count } } }) export default store ``` 2. 在main.js中引入store并挂载到Vue实例上,代码如下: ``` import Vue from 'vue' import App from './App' import store from './store' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App, store }) app.$mount() ``` 3. 在需要使用状态的组件中,使用mapState、mapMutations、mapActions、mapGetters等函数来获取状态,代码如下: ``` <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> <button @click="incrementAsync">Increment Async</button> <p>GetCount: {{ getCount }}</p> </div> </template> <script> import { mapState, mapMutations, mapActions, mapGetters } from 'vuex' export default { computed: { ...mapState({ count: state => state.count }), ...mapGetters([ 'getCount' ]) }, methods: { ...mapMutations([ 'increment', 'decrement' ]), ...mapActions([ 'incrementAsync' ]) } } </script> ``` 以上代码中,mapState函数将state中的count映射到组件的计算属性中,mapMutations函数将mutations中的increment和decrement映射到组件的方法中,mapActions函数将actions中的incrementAsync映射到组件的方法中,mapGetters函数将getters中的getCount映射到组件的计算属性中。 通过以上步骤,即可在uni-app中引入状态

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值