如何解决vuex因浏览器刷新数据消失,保持数据持久化问题?
vuex的一个全局状态管理的插件,但是在浏览器刷新的时候,内存中的state会释放。通常的解决办法就是用本地存储的方式保存数据,然后再vuex初始化的时候再赋值给state,此过程有点麻烦。因此可以使用插件vuex-solidification来解决。
<1>插件地址:
https://www.npmjs.com/package/vuex-persistedstate
<2>插件原理:
vuex有一个hook方法:store.subscribe((mutation, state) => {})
每次在mutation方法执行完之后都会调用这个回调函数,返回执行完毕之后的state
<3>使用方法
安装:npm install --save vuex-persistedstate
使用: import Vue from 'vue' import Vuex from 'vuex' //引入插件 import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex); const store = new Vuex.Store({ .... plugins: [ // 默认存储所有state数据到localstorage //加上这个就可以了 createPersistedState() ] })
<4>插件说明
createPersistedState([options])
key: String
存储到localStorage, sessionStorage 中对象的key,默认为vuex
local: Object 和 session: Object
1.分别代表localStorage的配置和sessionStorage的配置
2.local 和 session 里面可以有: include: Array 和 exclude: Array
例子:
假设vuex中state为:
state:{
count:{
value:0,
name:"tom"
},
id:1
} (1)local:{ include:[] }
//设置localstorage里面存储的state createPersistedState({
local: {
include: ['count.value']
}
}) /*
hook钩子触发之后,localstorage里面存储的对象为:
{
count: {
value: 0,
}
}
*/ (2)local:{ exclude:[] }
//设置除了exclude之外 localstorage里面存储的state createPersistedState({
local: {
//除了count.value,其他state数据都存储
exclude: ['count.value']
}
}) /*
hook钩子触发之后,localstorage里面存储的对象为:
{
count: {
name:"tom"
},
id:1
}
*/ (3)session:{ include:[] }
//设置sessionstorage里面存储的state createPersistedState({
session: {
include: ['count.value']
}
}) /*
hook钩子触发之后,sessionstorage里面存储的对象为:
{
count: {
value: 0,
}
}
*/ (4)session:{ exclude:[] }
//设置除了exclude之外 sessionstorage里面存储的state createPersistedState({
session: {
exclude: ['count.value']
}
})
/*
hook钩子触发之后,sessionstorage里面存储的对象为:
{
count: {
name:"tom"
},
id:1
}
*/ (5)同时设置local和session
createPersistedState({
local: {
include: ['id']
},
session: {
include: ['count']
}
}) /*
hook钩子触发之后,
localstorage里面存储的对象为:
{
id:1
} sessionstorage里面存储的对象为:
{
count:{
value:0,
name:"tom"
}
}
*/
<5>自定义存储
如果在本地存储中存储Vuex存储的状态并不理想。人们可以轻松地实现功能使用cookie(或任何其他你可以想到的);
import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie' const store = new Store({
// ...
plugins: [
createPersistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
removeItem: key => Cookies.remove(key)
}
})
]
})
实际上,可以传递任何遵循存储协议(getItem,setItem,removeItem等)的对象:
createPersistedState({ storage: window.sessionStorage })
其他介绍见官网
如何解决vuex因浏览器刷新数据消失,保持数据持久化问题?的更多相关文章
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 解决vuex在页面刷新后数据丢失的问题
一.原因 js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的. 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Loc ...
- 10.解决VUEX刷新的时候出现数据消失
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 页面刷新vuex数据消失问题解决方案
VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这 ...
- vue:vue页面刷新vuex数据消失问题
vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数 ...
- 页面刷新vuex数据消失问题解决方案 之 vuex中间件
之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新vuex数据消失问题解决方案. 今天和同事沟通这个vuex数据还原问题,我说我的方法很奇异.聊着聊着,同事咋不用 store.sub ...
- 解决Vuex持久化插件-在F5刷新页面后数据不见的问题
页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionSt ...
随机推荐
- Kubernetes PV/PVC使用实践
转载于https://www.cnblogs.com/ericnie/p/7733281.html pv,pvc的概念不解释了,之前在registry中已经使用过PV和PVC,现在想把WebLog ...
- Nginx+Tomcat+Memcache实现负载均衡及Session共享
第一部分 环境介绍 部署环境: Host1:Nginx.Memcached.Tomcat1 Host2:Tomcat2 Tomcat_version:8.0.38 第二部分 Nginx+Tomcat实 ...
- android listview使用自定义的adapter没有了OnItemClickListener事件解决办法
在使用listview的时用使用自定义的adapter的时候,如果你的item布局中包含有Button,Checkable继承来的所有控件,那么你将无法获取listview的onItemClickLi ...
- NDKr10的各种BUG
NDKr10有几个BUG,所以推荐使用NDKr9 bug1:不支持srand() bug2: 链接异常,找不到stpcpy()
- httpclient4.5 连接池的封装
随着微服务的流行,服务之间的http调用越来越多,遇到的问题也比较多,写这边文章的目的也是将自己遇到的坑和解决方案跟大家分享 一.为什么要用Http连接池 1.降低延迟:如果不采用连接池,每次连接发起 ...
- Redis学习七:Redis的持久化-总结(Which one)
1.官网建议 2.RDB持久化方式能够在指定的时间间隔能对你的数据进行快照存储 3.AOF持久化方式记录每次对服务器写的操作,当服务器重启的时候会重新执行这些 命令来恢复原始的数据,AOF命令以red ...
- 样式缩写——css技巧(一)
一.margin和padding缩写 例: .sample-margin1{ margin-top:15px; margin-right:20px; margin-bottom:12px; margi ...
- Python练习-生成器表达式-筛选与运算
# 编辑者:闫龙 l = [10, 2, 3, 4, 5, 6, 7] l1 = [int(i)**2 for i in l] # 得到一个新列表l1,新列表中每个元素是l中对应每个元素值的平方 pr ...
- 树形dp(C - Choosing Capital for Treeland CodeForces - 219D )
题目链接:https://cn.vjudge.net/contest/277955#problem/C 题目大意:输入n,代表有n个城市,然后再输入n-1条有向边,然后让你找出一个改变边数的最小值,使 ...
- tensorflow环境安装
tensorflow环境安装1.安装虚拟机Virtrualbox下载地址:https://www.virtualbox.org/wiki/Downloads 2.下载安装Ubuntu镜像下载地址:ht ...