uniapp中vuex状态管理

应用中，保持登录状态是常见需求，本文讲解使用uni-app框架时如何保持用户登录状态。
即：初次进入应用为未登录状态------->登录---------->关闭应用，再次打开--------->为已登录状态
传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态，但是uni-app不支持对cookie的读写。因为uni-app框架的主体是 VUE，所以可以使用 vuex 进行登录态管理。
关于vuex中定义的全局变量和方法需要定义在指定目录的文件内。
即在项目目录下新建名称为 store 的目录，目录下创建用于定义全局变量和方法的 js 文件，如下图：

index.js文件内容如下图所示：

想要定义的这个 js 文件中的变量和方法能在各个页面使用并生效，需要先在项目目录下的 main.js 文件中导入这个 js 文件并声明方法，如下图所示：

声明结束后就可以在页面中监控全局变量和相应方法了，下面在一个登录页面中具体展示。

先在页面导入vuex的方法，如下：

然后，在 computed 计算属性方法中使用 mapState 对全局变量进行监控，在 method中使用 mapMutations 进行全局方法监控，如下所示：

定义登录成功后跳转到个人中心的函数，如下：

网络请求成功后，在回调函数 success 中调用该方法，并把回调函数的返回值数据传给 login 方法，如下：

随后 index.js 文件中的login方法会把传过来的用户数据保存在本地缓存中。

app没等进入应用时由APP.vue文件中的周期函数对app进行监听，所以在加载函数中定义方法，从本地缓存中取出用户数据进行登录，这样只要不清除本地缓存，每次打开应用的时候都会时登录状态，不需要反复发起网络登录请求，如下：

由于此种方式是把第一次登陆的用户账户信息保存在本地缓存，可能会遇到以下问题：

（1）如果用户的密码等隐私信息在后台并没有进行加密处理，则会保存在本地缓存，有可能被其他拥有读取缓存权限的应用获取导致隐私泄露。

解决办法：正规的开发流程中，后台返回到前端的用户数据中，绝大部分信息都应该是通过MD5等加密算法加密过后的，如果没有，应进行后台处理。

（2）通常需要登录的应用，后台的token令牌是有有效期限的，期限过了之后所有需要用到token的接口请求都会失败。保存在本地的缓存如果不重新执行登录操作刷新缓存数据，则会有token失效的问题。

解决办法：（1）在前端也编写缓存清理期限，与后台保持一致，到达期限后提示用户登录失效，请重新登录。

（2）后台提供用户信息获取接口，在应用的生命周期函数里调用接口刷新缓存。
转载：https://www.cnblogs.com/edward-life/p/11181139.html

uniapp中vuex状态管理相关推荐

vue2中vuex状态管理的理解（菜单面包板）
本片理解基于vue2对应的Vuex文档,结合了官网文档以及众多前辈大佬所发布的帖子,由衷表示感谢. vuex的超详细讲解和具体使用细节记录随着我们进一步扩展约定,即组件不允许直接变更属于 store ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
Vuex 状态管理的工作原理
Vuex 状态管理的工作原理为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时,经常会遇到一些组件间共享的数据或状态,或是需要通过 props 深层传递的一些数据.在应用规模较小 ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
[vuex]状态管理vuex
vuex 状态管理vuex,之前一般都是通过一个全局js文件实现全局设置,在vue中通过vuex进行管理简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的 ...
【3D商城】使用Vuex状态管理完成购物车模块
[3D商城]使用Vuex状态管理完成购物车模块创建购物车的全局数据添加产品到购物车导航栏的购物车模块结果常见问题总结创建购物车的全局数据在store的index.js中 ,创建购物车变量 ...
Vue项目成员管理系统 Vuex状态管理(10)
Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式储存管理应用的所有组件的转台并以相应的规则保证装填以一中可预测的方式发生变化. Vuex可以将组件中的某些属性.值或者方法拿出来统 ...
【vuex状态管理案例mutations和actions区别】
目录 vuex 状态管理传统组件传值的缺点案例加减效果现在我们希望它是两个计数器的数同时加加减~ 先来看一下减的父组件子组件加的是一样的逻辑哦虽然这样可以实现我们想要的效果但是,还是 ...
vuex状态管理，用最朴实的话讲解最难懂的技术，
一.案例演示引入vuex 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm n install vuex --save 需要注意的是这里一定要加上 –sa ...

uniapp中vuex状态管理

uniapp中vuex状态管理相关推荐

最新文章

热门文章