VUE:vuex 用户登录信息的数据写入与获取方式


Posted in Javascript onNovember 11, 2019

整体思路:

前台获取用户数据,向后台发送post请求,验证成功后

前台接受数据,改变用户登录状态

将登录状态及用户数据写入到state中

这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息

1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch(‘setLogin', true);将数据写入到state中

页面:login.vue

代码:

this.loginData = await getUserInfo(this.uname,this.pwd);
    console.log(this.loginData);
    if(this.loginData.res==1){
     this.$store.dispatch('setLogin', true);
     this.$store.dispatch('setAccount',this.loginData.obj.phone );

2.将数据写到state中

页面:action.js

代码:

setAccount ({commit}, platform) {
 commit('SET_ACCOUNT', platform);
},

3.将数据写到state中

页面:mutation.js

代码:

SET_ACCOUNT (state, platform) {
   state.account = platform;
  },

4. 添加获取state中对应数据方法

页面:getter.js

代码:

getuname: (state) => state.account,
 homepage.vue中使用

5. 使用this.$store.getters.getuname调取数据

页面:login.vue

代码:

console.log( this.$store.getters.getuname)

以上这篇VUE:vuex 用户登录信息的数据写入与获取方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js弹出div并显示遮罩层
Feb 12 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
html5调用摄像头截图功能
Jan 18 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 #Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 #Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 #Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 #Javascript
vue与django集成打包的实现方法
Nov 11 #Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 #Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 #Javascript
You might like
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python赋值操作方法分享
2013/03/23 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python字符串替换实例分析
2015/05/11 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
python基于openpyxl生成excel文件
2020/12/23 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
教师个人的自我评价分享
2014/01/02 职场文书
户籍证明模板
2014/09/28 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
python 中的jieba分词库
2021/11/23 Python