使用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: function (state) {
   if (!state.user) {
    state.user = JSON.parse(localStorage.getItem(key))
   }
   return state.user
  }
 },
 mutations: {
  $_setStorage (state, value) {
   state.user = value
   localStorage.setItem(key, JSON.stringify(value))
  },
  $_removeStorage (state) {
   state.user = null
   localStorage.removeItem(key)
  }
 }
})

export default store

3、在main.js中引入store,

import store from './store/index'
new Vue({
 el: '#app',
 router,
 store, // 引入store
 components: { App },
 template: '<App/>'
})

4、在登录组件中，如代码所示：

this.$message({
  message: '登录成功',
  type: 'success'
})
this.$store.commit('$_setStorage', {user: this.loginForm.username})
this.$router.push({name: 'Home'})

5、储存其他状态类信息，方式相同。

以上这篇使用vuex存储用户信息到localStorage的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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.

  • 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项目使用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 用户登录信息的数据写入与获取方式

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

  • 使用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

  • 误引用vuex-persistedstate导致用户信息无法清除问题及解决

    误引用vuex-persistedstate导致用户信息无法清除问题及解决

    目录 vuex-persistedstate导致用户信息无法清除 问题 解决办法 延伸 使用vuex-persistedstate插件遇到的问题 vuex-persistedstate导致用户信息无法清除 问题 网站使用nuxt框架,使用js-cookie+vuex存储用户信息,在这一篇文章中关于nuxt使用vuex存储以及获取用户信息踩坑,我讲过nuxt是服务端和客户端渲染集成,所以服务端将user信息初始化为空,客户端无法再次初始化,即便客户端的cookie中能获取到用户信息,也无法给use

  • nuxt使用vuex存储及获取用户信息踩坑的解决

    nuxt使用vuex存储及获取用户信息踩坑的解决

    目录 一.背景 二.具体使用方法以及遇到的问题 三.解决办法 一.背景 按公司要求做一个电商网站,考虑到seo,所以用的是nuxt进行开发. 登录之后记录用户信息(user)使用cookie+vuex模式. 二.具体使用方法以及遇到的问题 1.无法解码导致无法转化为对象且不支持中文: 使用nuxt的nuxtServerInit在在服务端的cookie里获取用户信息,但是user在存储时使用js-cookie,客户端已对数据进行编码且可能包含中文,在使用JSON.parse进行string转化为对

  • Vuex结合storage实现用户信息本地存储方式

    目录 首先安装插件库good-storage 在你写离线存储逻辑部分的地方引入good-storage 接下来是定义vuex的代码部分 在外部组件中的操作如下 自己学习的过程中遇到用户新的填写的页面,所以就想着页面每次刷新之后总不能一直填写,哇,累死,所以就想到了离线存储机制,这里使用的是good-storage封装库结合Vuex来实现这个功能,在此做个笔记. 首先安装插件库good-storage npm install good-storage 在你写离线存储逻辑部分的地方引入good-st

  • Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

    Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

    目录 前言 一.实现效果 二.实现步骤及涉及要点 三.涉及代码 总结 前言 在前端项目开发中,实现用户的登陆注册功能时常常会有一个问题,那就是我们设置的登录状态,在浏览器页面刷新后就消失了,这其实只是因为我们没有保存用户状态. 这里小马演示使用的是 localStorage + vuex 方法(其他诸如 sessionStorage.cookie 等用法相同,只是功能有所区别). 一.实现效果 实现功能:用户登录成功后,刷新浏览器页面或者关闭浏览器再次打开网页后,登录状态依然保持,直到用户点击登

  • Vuex处理用户Token过期及优化设置封装本地存储操作模块

    目录 1. 处理用户 Token 2. 优化封装本地存储操作模块 - 封装localStrage功能 3. Vuex各属性的使用 4. 关于 Token 过期问题 5.优化设置 Token 1. 处理用户 Token Token 是用户登录成功之后服务端返回的一个身份令牌,在项目中的多个业务中需要使用到: 访问需要授权的 API 接口 校验页面的访问权限 ... 问题:Token往哪儿存? 我们只有在第一次用户登录成功之后才能拿到 Token.所以为了能在其它模块中获取到 Token 数据,我们

  • Django如何使用jwt获取用户信息

    HTTP请求是无状态的,我们通常会使用cookie或session对其进行状态保持,cookie存储在客户端,容易被用户误删,安全性不高,session存储在服务端,在服务器集群情况下需要解决session不共享的问题,常用的解决方案有4种:客户端Cookie保存.服务器间Session同步.使用集群管理Session.把Session持久化到数据库. jwt:json web token 在用户注册登录后,记录用户登录状态,我们可以用cookie和session来做状态保持,cookie存储在

  • vue实现微信获取用户信息的方法

    本次项目做到一个点赞功能,即分享出去一个页面给微信好友,微信好友点开并点赞,需要将点赞用户的微信昵称,微信头像以及微信openid,微信unionid(这个需要关注公众号才会有该字段)传给后端,记录点赞人的相关信息 微信网页授权 1.微信公众号网页授权配置,详见官网 2.关于网页授权的两种scope的区别说明 (详细见官网) -scope=snsapi_base 获取微信用户openid,获取后直接跳转业务页面,不需要用户操作 -scope=snsapi_userinfo 获取微信用户详细信息(

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

随机推荐