vue项目持久化存储数据的实现代码


Posted in Javascript onOctober 01, 2018

方式一、使用localStorage在数据存储

1、要在浏览器刷新的时候重新存储起来

if (window.localStorage.getItem(authToken)) {
store.commit(types.SETLOANNUMBER, window.localStorage.getItem('loanNumber'));
}

方式二、使用vue-cookie插件来做存储

1、参考地址传送门

2、安装包

npm install vue-cookie --save

3、在store中存储起来

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)
var VueCookie = require('vue-cookie');

export default new Vuex.Store({
state: {
 token: VueCookie.get('token')
},
mutations: {
 saveToken(state, token) {
  state.token = token;
  // 设置存储
  VueCookie.set('token', token, { expires: '30s' });
 }
},
actions: {

}
})

4、在登录页面中设置到存储中

import { mapMutations } from 'vuex';
export default {
methods: {
 login() {
  this.saveToken('123')
 },
 ...mapMutations(['saveToken'])
}
};

方式三、使用vuex-persistedstate插件参考文件

在做大型项目,很多数据需要存储的建议使用这种方式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件开发备注
Aug 27 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
js实现div色块碰撞
Jan 16 Javascript
JS如何生成随机验证码
Mar 02 Javascript
小程序实现录音功能
Sep 22 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 #Javascript
在create-react-app中使用sass的方法示例
Oct 01 #Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 #Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 #Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 #Javascript
angularJs中$scope数据序列化的实例
Sep 30 #Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 #Javascript
You might like
mysql 性能的检查和优化方法
2009/06/21 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
浅谈php扩展imagick
2014/06/02 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
软件售后服务方案
2014/05/29 职场文书
社区助残日活动总结
2014/08/29 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书