vuex中数据持久化插件vuex-persistedstate使用详解
作者:JackieDYH 发布时间:2024-04-26 17:41:54
数据持久化vuex-persistedstate使用
vuex是在中大型项目中必不可少的状态管理组件,刷新会重新更新状态,但是有时候我们并不希望如此。例如全局相关的,如登录状态、token、以及一些不常更新的状态等,我们更希望能够固化到本地,减少无用的接口访问,以及更佳的用户体验。
安装起步
npm i vuex-persistedstate --save
目前的环境版本:
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.4.0",
"vuex-persistedstate": "^3.0.1",
vuex已经升级到了3,看了release note没有发现太过分的升级,预计不会出现不兼容的情况,有感兴趣的小伙伴可以升级体验一下。
配置使用
在vuex初始化时候,作为组件引入。
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [persistedState()]
})
自定义存储方式
vuex-persistedstate默认使用localStorage来固化数据,一些特殊情况要如何应对呢?(如:safari的无痕浏览模式)
需要使用sessionStorage的情况
plugins: [
persistedState({ storage: window.sessionStorage })
]
使用cookie的情况
import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
// ...
plugins: [
persistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
removeItem: key => Cookies.remove(key)
}
})
]
})
想使用cookie同理
默认持久化所有state
指定需要持久化的state,配置如下
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(val) {
return {
// 只储存state中的assessmentData
assessmentData: val.assessmentData
}
}
})]
vuex引用多个插件的写法
譬如:vuex提示的插件和持久化的插件一起使用,配置如下
import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判断环境 vuex提示生产环境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
storage: window.sessionStorage
})
export default new Vuex.Store({
// ...
plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})
plugins要是一个一维数组不然会解析错误
使用vuex-persistedstate插件遇到的问题
这是一个做持久化的插件:vuex-persistedstate
我在做项目时,遇到一个问题,就是做下面这个功能,渲染数据的时候,因为这个数据好多个地方使用,所以呢,把它存到了vuex里面。vuex 是将数据存到了浏览器的内存中,刷新就没了
这行代码是写在vuex里面的,就是说,我直接从本地去拿数据
list: JSON.parse(window.localStorage.getItem('abc')).category.list || []
直接看下代码: 我一开始是这样想的,既然我vuex中有数据了,不用计算属性行不行,直接渲染,确实可以渲染,但是品牌这一项咋渲染呢,push行不通啊,那就只能把结构写死,但是页面效果就不对了,所以这个地方用计算属性,第一,动态的取到前两项,第二,可以动态的添加新的 li 结构。
计算属性使用的场景:有数据啦,但不是我想要的格式,要加工加工
setup () {
const brand = reactive({
id: 'brand',
name: '品牌',
children: [{ id: 'brand-children', name: '品牌推荐' }]
})
const store = useStore()
const cateList = computed(() => {
const list = store.state.category.list.map(item => {
return {
id: item.id,
name: item.name,
children: item.children && item.children.slice(0, 2)
}
})
list.push(brand)
return list
})
return { cateList }
}
来源:https://jackiehao.blog.csdn.net/article/details/106905417
猜你喜欢
- 关于Tensor的数据类型说明1. 32位浮点型:torch.FloatTensora=torch.Tensor( [[2,3],[4,8]
- 实例如下所:import osimport xlrdimport xlwtfrom xlutils.copy import copydef
- 英文文档:locals()Update and return a dictionary representing the current l
- 普通方法:爬取梨视频import reimport timeimport randomimport requestsfrom lxml im
- Function ChkInvaildWord(Words) Const InvaildWords=&quo
- 本文实例讲述了Android基于TCP和URL协议的网络编程。分享给大家供大家参考,具体如下:手机本身是作为手机终端使用的,因此它的计算能力
- python的hashlib库中提供的hexdigest返回长度32的字符串。直接通过digest返回的16字节,有不可打印字符。问题来了,
- 而每次查询分析器寻找路径时,并不会每一次都去统计索引中包含的行数,值的范围等,而是根据一定条件创建和更新这些信息后保存到数据库中,这也就是所
- 用游标,和WHILE可以遍历您的查询中的每一条记录并将要求的字段传给变量进行相应的处理==================DECLARE @
- 1.索引问题索引是数据库优化中最常用也是最重要的手段之一,通过索引通常可以帮助用户解决大多数 的SQL性能问题。本章节将对MySQL中的索引
- 本文实例讲述了Python socket套接字实现C/S模式远程命令执行功能。分享给大家供大家参考,具体如下:一. 前言要求: 使用pyth
- 最近几天从网上找了几个asp.net的登录案例想要研究研究代码,结果在用Sql Server2005附加数据库文件时弹出错误信息:看到网友回
- 简单的学习下利用socket来建立客户端和服务端之间的连接并且发送数据1. 客户端socketClient.py代码import socke
- 这个绝对是IE6的bug。我想要达到的是如下的效果。通过三个div,排布好侧栏和内容区。我用了如下的css:<style type=&
- 窗口函数简单理解,就是对查询的结果多出一列,这一列可以是聚合值,也可以是排序值。开窗函数一般就是说的是over()函数,其窗口是由一个 OV
- git fetch和git pull都可以将远端仓库更新至本地那么他们之间有何区别?想要弄清楚这个问题有有几个概念不得不提。FETCH_HE
- 平时经常看php的错误日志,很少有机会去自己动手写日志,看了王健的《最佳日志实践》觉得写一个清晰明了,结构分明的日志还是非常有必要的。在写日
- 具体代码如下所示:#coding=utf8from urllib import requestimport reimport urllib,
- 这几天想统计一下《中国人文社会科学期刊 AMI 综合评价报告(2018 年):A 刊评价报告》中的期刊,但是只找到了该报告的PDF版,对于表
- SQL Server 客户端配置工具用于配置客户端的工具(除基于DOS操作系统的客户端工具以外),以便使它们可以成功地和SQL Server