页面刷新后,vuex中数据丢失、清空的解决方案 vuex-persistedstate
栏目: JavaScript · 发布时间: 5年前
内容简介:可以使用示例代码:以上是将状态保存在 localStorage ,也可以使用
场景之一
当用户登录时,设置了 登录状态 并相应地有条件地显示 登录/注销 按钮。
但是当刷新页面时,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年的数据被清空
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
并行计算导论
Ananth Grama、George Karypis、张武、毛国勇、Anshul Gupta、Vipin Kumar、程海英 / 张武、毛国勇、程海英 / 机械工业出版社 / 2005-1-1 / 49.00元
《并行计算导论》(原书第2版)全面介绍并行计算的各个方面,包括体系结构、编程范例、算法与应用和标准等,涉及并行计算的新技术,也覆盖了较传统的算法,如排序、搜索、图和动态编程等。《并行计算导论》(原书第2版)尽可能采用与底层平台无关的体系结构并且针对抽象模型来设计处落地。书中选择MPI、POSIX线程和OpenMP作为编程模型,并在不同例子中反映了并行计算的不断变化的应用组合。一起来看看 《并行计算导论》 这本书的介绍吧!