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 相关文章推荐
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 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
一些PHP写的小东西
2006/12/06 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
基于empty函数的输出详解
2013/06/17 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python中的格式化输出用法总结
2016/07/28 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python实现接口并发测试脚本
2019/06/25 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
毕业学生推荐信
2013/12/01 职场文书
求职信需要的五点内容
2014/02/01 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
材料会计岗位职责
2014/03/06 职场文书
海飞丝的广告词
2014/03/20 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
未中标通知书
2015/04/17 职场文书
2015年预算员工作总结
2015/05/14 职场文书
贷款担保书范本
2015/09/22 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android