使用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 相关文章推荐
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
js中document.write的那点事
Dec 12 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
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投票系统防刷票判断流程分析
2012/02/04 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php技巧小结【推荐】
2017/01/19 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python使用zip将list转为json的方法
2018/12/31 Python
python 命令行传入参数实现解析
2019/08/30 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Python如何读取、写入CSV数据
2020/07/28 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
腾讯公司的一个sql题
2013/01/22 面试题
幼儿园教师教育感言
2014/02/28 职场文书
小学家长学校培训材料
2014/08/24 职场文书
师德先进个人材料
2014/12/20 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
导游词之山海关
2019/12/10 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
浅谈Python中对象是如何被调用的
2022/04/06 Python
python pygame 开发五子棋双人对弈
2022/05/02 Python