vue项目持久化存储数据的实现代码
作者：水痕01 发布时间：2024-04-27 15:59:48
标签：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://blog.csdn.net/kuangshp128/article/details/82379575
0
投稿猜你喜欢
- 一、目的之前在博文SQL Server数据库最小宕机迁移方案中提到了使用了完全备份+差异备份的功能完成了数据库的转移，但是这个方法在遇到了7
- 1. 排序有什么用“排序”这个专业名词原本是来源于计算机程序操作中的，是一种很常见的算法设计，当然，对交互设计来说，探讨冒泡排序和堆排序之间
- 将一个 awk 脚本移植到 Python 主要在于代码风格而不是转译。脚本是解决问题的有效方法，而 awk 是编写脚本的出色语言。它特别擅长
- 1. 确认已经安装了NT/2000和SQL Server的最新补丁程序，不用说大家应该已经安装好了，但是我觉得最好还是在这里提醒一
引言我们日常开发中，如何保证接口数据的安全性呢？个人觉得，接口数据安全的保证过程，主要体现在这几个方面：一个就是数据传输过程中的安全，还有就- mysql 5.6对密码的强度进行了加强，推出了 validate_password 插件。支持密码的强度要求。安装办法：在配置文件中打开[
- 本文实例讲述了Python使用中文正则表达式匹配指定中文字符串的方法。分享给大家供大家参考，具体如下：业务场景：从中文字句中匹配出指定的中文
- 如下所示：nums = [1,8,2,23,7,-4,18,23,24,37,2]result = map(nums.index, heap
- 如果你在写文章或者 Demo，为了简单，你当然可以用事件监听函数，以及那些事件对象提供的方法等。但在实际中，有一些方法和属性是有兼容性问题的
- 本文实例讲述了flask 框架操作MySQL数据库。分享给大家供大家参考，具体如下：一、创建数据库表格"""C
- 目录一，利用 tensorboardX 可视化网络结构二，利用 vistom 可视化三，利用pytorchviz可视化网络结构一，利用 te
- 使用Numpy创建三维矩阵创建语句#创建形式有两种#1 随机数形式np.random.random((x,y,z))#2 0或1形式np.o
- 本人曾经用过的备份方式有:mysqldump、mysqlhotcopy、BACKUP TABLE 、SELECT INTO OUTFILE，
- set ANSI_NULLS ON set QUOTED_IDENTIFIER ON go -- =====================
- 使用pyaudio录音和格式转化环境pip3 install pyaudiopip3 install wavepip3 install nu
- numpy中有一个掩码数组的概念，需要通过子模块numpy.ma来创建，基本的创建方式如下>>> import numpy
- 经典鼠标控制左右滚动,图片间隔无缝滚动,悬停滚动,图片控制左右滚动JavaScript代码<!DOCTYPE html PUBLIC
- 基本概念当前读与快照读在MVCC中，读操作可以分成两类：快照读 (snapshot read)与当前读 (current read)。 快照
- 最近在工作遇到一个难题。我所在的测试组有一套PC软件前端自动化工程，在进行自动化测试时，需要在一台古老的xp机器上运行，但这台古老的xp机器
- 本文实例讲述了django框架模型层功能、组成与用法。分享给大家供大家参考，具体如下：Django models是Django框架自定义的一
