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

整体思路：

前台获取用户数据，向后台发送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 用户登录信息的数据写入与获取方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue项目使用localStorage+Vuex保存用户登录信息

    本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下 api.js import axios from 'axios' const baseURL = 'http://XXX // 全局的 axios 默认值 axios.defaults.baseURL = baseURL // 登录请求 const loginCheck = params => { return axios.post('/login', params).then(

  • 详解Vuex管理登录状态

    详解Vuex管理登录状态

    又仔细看了一遍vuex的文档,还是云里雾里的,不过至少明白它是一个专门管理状态的,根据数据状态的改变可以驱动视图更新,既然是这样那至少登录注册是一种状态,就用登录来做测试,学习vuex,不过话说回来,既然专门管理状态,那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑. 1.据说储存的vuex store里面的状态是临时的,右键刷新一下页面这些状态就销毁了(这是据说,请大神解惑我也没办法证实),如果是这样的话,我的用户状态user还是应该要写入sessionStorage,不然登录了的

  • vue实现将数据存入vuex中以及从vuex中取出数据

    1.在store文件下面新建文件 print.js ,写入以下代码 /** * 存放 ** 数据 * **/ // initial state const state = { all: { ID:'', BrandID:'' } } // getters const getters = {} // actions const actions = {} // mutations const mutations = { setPrint(state, all) { //设置参数 state.all

  • vue通过cookie获取用户登录信息的思路详解

    思路 进入页面 若未登录,跳转至登陆页面 若已登录,从cookie中获取用户信息,并执行后续操作 2. 登录页面,存入cookie(setCookie) import {setCookie,getCookie}from 'src/js/cookieUtil' methods: { async cheack_n_p () { if( this.checkCode === this.pwd) { this.loginData = await getUserInfo(this.uname, this.

  • 使用vuex存储用户信息到localStorage的实例

    1.首先需要装vuex npm install vuex -d 2.新建store文件夹,新建index.js, 并引入vue.vuex,代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const store = new Vuex.Store({ state () { return { user: null } }, getters: { getStorage: functi

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

    整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch('setLogin', true);将数据写入到state中 页面:login.vue 代码: this.loginData = await getUserI

  • Vue保持用户登录状态(各种token存储方式)

    Vue保持用户登录状态(各种token存储方式)

    目录 怎么设置Cookie Cookie的缺点: LocalStorage与SessionStorage存储Token LocalStorage与SessionStorage的主要区别: Vuex存储Token 为什么要使用Vuex 在前端中,实现保持用户登录状态的方法有很多种,你通过可以存Cookie.Session.Token等信息来保持,不管后台向前端发送哪个我们要做的就是将这些信息存在在本地浏览器中,浏览器再次发送请求时,将设置了'键'='值'的Cookie再次抛给服务器,服务器通过Co

  • vue项目退出登录清除store数据的三种方法

    vue项目退出登录清除store数据的三种方法

    目录 方法一:(不友好,页面会白屏,不推荐使用) 方法二 : (不会出现白屏,推荐使用) 方法三 : vuex清除token (不会出现白屏,推荐使用) 总结 方法一:(不友好,页面会白屏,不推荐使用) 在退出登录的loginOut 方法里面: window.location.reload() 方法二 : (不会出现白屏,推荐使用) 利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if="is

  • django使用JWT保存用户登录信息

    在使用前必须弄明白JWT的相关知识,可以看我的另一篇博文:https://www.jb51.net/article/166843.htm 什么是JWT? Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景.JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑

  • Springboot+Shiro记录用户登录信息并获取当前登录用户信息的实现代码

    由于最近做项目需要,在用户登陆后有一个功能是需要用户的信息,进行写入数据库的操作.但是目前还用不到Shiro的高级权限,只为了简单获取用户信息,自己整合了一个只记录用户,获取用户信息的功能. 导入Shiro依赖 <!-- Shiro --> <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-spring</artifactId> <version

  • python使用selenium打开chrome浏览器时带用户登录信息实现过程详解

    python使用selenium打开chrome浏览器时带用户登录信息实现过程详解

    导读 我们在使用selenium打开google浏览器的时候,默认打开的是一个新的浏览器窗口,而且里面不带有任何的浏览器缓存信息.当我们想要爬取某个网站信息或者做某些操作的时候就需要自己再去模拟登陆 selenium操作浏览器 这里我们就以CSDN为例,来展示如何让selenium在打开chrome浏览器的时候带上用户的登录信息 打开chrome浏览器 from selenium import webdriver from selenium.webdriver import ChromeOpti

  • php中如何同时使用session和cookie来保存用户登录信息

    php中如何同时使用session和cookie来保存用户登录信息

    同时使用session和cookie来保存用户登录信息1.数据库连接配置页面:connectvars.php 复制代码 代码如下: <?php//数据库的位置define('DB_HOST', '127.0.0.1');//用户名define('DB_USER', 'root');//口令define('DB_PASSWORD', '19900101');//数据库名define('DB_NAME','test') ;?> 2.登录页面:logIn.php 复制代码 代码如下: <?ph

  • php同时使用session和cookie来保存用户登录信息的实现代码

    1.用户登录状态操作类UserLogin <?php final class UserLogin { public function __construct() { } public static function getUserInfo() { if (isset($_COOKIE["user_id"])&&$_COOKIE["user_id"]&&(trim($_COOKIE["user_id"])!=&

随机推荐