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


Posted in Javascript onNovember 11, 2019

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的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
js实现简单五子棋游戏
May 28 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
JS中比较两个Object数组是否相等方法实例
Nov 11 #Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 #Javascript
vue与django集成打包的实现方法
Nov 11 #Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 #Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 #Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 #jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 #jQuery
You might like
如何把PHP转成EXE文件
2006/10/09 PHP
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
详解Python的循环结构知识点
2019/05/20 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
大码女装:Ulla Popken
2019/08/06 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
nginx 配置缓存
2022/05/11 Servers
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS