页面刷新后,vuex中数据丢失、清空的解决方案 vuex-persistedstate
栏目: JavaScript · 发布时间: 5年前
内容简介:可以使用示例代码:以上是将状态保存在 localStorage ,也可以使用
场景之一
应用API进行用户身份验证,将登录状态保存为Vuex状态中的布尔值。
当用户登录时,设置了 登录状态 并相应地有条件地显示 登录/注销 按钮。
但是当刷新页面时,vue应用程序的状态将丢失并重置为默认值。
这导致的问题就是:即使用户登录了,但刷新页面时, 登录状态 也会设置为 false, 这样即使用户保持登录状态,也会显示登录按钮而不是注销按钮....
怎么做才能防止这种行为
解决方案
可以使用 vuex-persistedstate
。这是一个用于 vuex
在页面刷新之间处理和存储状态的插件。
示例代码:
import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ... plugins: [ createPersistedState() ] })
以上是将状态保存在 localStorage ,也可以使用 js-cookie
将状态保存在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), // 参考 https://github.com/js-cookie/js-cookie#json setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }), removeItem: key => Cookies.remove(key) } }) ] })
总结:
-
需要安装
js-cookie
-
getItem
加载保存的状态 -
setItem
保存状态 -
removeItem
删除保存的状态
vuex-persistedstate
文档和安装说明: https
: //www.npmjs.com/package/vuex-persistedstate
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 如何清空所有Keychain及UserDefaults
- git如何清空所有的commit记录
- Chrome 69 清空 Cookies 会保留 Google 的 Cookies
- MUI调用原生自定义方法实现计算缓存与清空缓存
- jQuery删除/清空指定元素下的所有子节点的方法
- 美国电邮商VFEmail遭黑客恶意攻击:服务器20年的数据被清空
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。