vue项目持久化存储数据的实现代码
方式一、使用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插件参考文件
在做大型项目,很多数据需要存储的建议使用这种方式
您可能感兴趣的文章:
文章同步发布: https://www.geek-share.com/detail/2756840369.html
vue项目持久化存储数据的实现代码的更多相关文章
- Vue项目开发最新、最全代码规范文档
Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337 一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...
- Unity编辑器扩展 Chapter7--使用ScriptableObject持久化存储数据
Unity编辑器扩展 Chapter7--使用ScriptableObject持久化存储数据 unity unity Editor ScirptableObject Unity编辑器扩展 Chapt ...
- 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示
在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...
- vue项目模拟后台数据
这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了 ...
- 在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...
- 在vue项目中mock数据
第一步:安装: 在命令行中执行: npm install mockjs; 第二步:定义index.js文件 我们新建一个mock文件夹,此文件夹中建一个index.js文件:在index.js中输入以 ...
- vue项目实现导出数据到excel
实现导出功能分两种,一种是客户端拿到数据做导出,第二种是服务器端处理好,返回一个数据流实现导出 第一种网上很容易找到,也很好用,本文要说的是第二种. fetchExport({ id: this.so ...
- ABP 集成 nswag 到 VUE 项目, 自动生成操作类代码
记录日期: 2019-9-22 23:12:39 原文链接:https://www.cnblogs.com/Qbit/p/11569906.html 集成记录: npm install nswag - ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- 如何对iPhone进行屏幕录像
如何对iPhone进行屏幕录像 录制时候的效果: 1. 打开QuickTime Player 2. 在文件中新建影片录制 3. 然后酱紫录制
- 51nod 1403 有趣的堆栈
题目看这里 主要是能分析出这样一个结论: 每个pop根据这个元素上面被压过多少个元素,可以知道他是在前面哪个pop之前被push的. 根据这些信息可以求得每个pop到上一个pop之间有多少个push, ...
- [T-ARA][TIAMO]
歌词来源:http://music.163.com/#/song?id=439915067 改了一版格式,先尝试一下,考虑到总不能永远只看着拼音读,所以想把发音按照韩文字来写,以后争取看着韩文字唱. ...
- python正则二
在python中,我们可以使用re模块来使用正则表达式. 正则表达式使用\对特殊字符进行转义,因为python本身也是用\作为转义,所以在使用正则的时候会出现这样的情况,'python\\.org', ...
- Oracle Golden Gate概要
Oracle GoldenGate简介 Oracle Golden Gate用于源数据库与目标数据库的数据复制备份:可以在异构的环境(各种操作系统和数据库)之间实现数据亚秒级的实时复制备份:以及可以在 ...
- Django中模型(五)
Django中模型(五) 六.模型查询 1.概述 查询集,表示从数据库获取的对象集合. 过滤器就是一个函数,基于所给的参数限制查询集结果.查询集可以有多个过滤器. 从sql角度来说,查询集合等价于se ...
- Golang测试包
Golang测试包 golang自带了测试包(testing),直接可以进行单元测试.性能分析.输出结果验证等.简单看着官方文档试了试,总结一下: 目录结构和命令 使用golang的测试包,需要遵循简 ...
- 分享一下不错的样式,适用于Gridview,兼容性还不错!
使用方法很简单, 1.设置Gridview的[CssClass]属性为[tbinfo] 2.设置Gridview的[BorderWidth]属性为[0] 3.设置Gridview的[CellSpaci ...
- NMON监控linux性能
NMON监控linux性能 一.下载nmon压缩包,下载地址:http://download.csdn.net/download/fhqsse220/6699865 二.安装方法: 1.将nmon_l ...
- Swift 开发语法
文/Tuberose(简书作者)原文链接:http://www.jianshu.com/p/5e2d4c34f18e著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 简介 Swift 语 ...