页面刷新后,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)
      }
    })
  ]
})

总结:

  1. 需要安装 js-cookie
  2. getItem 加载保存的状态
  3. setItem 保存状态
  4. removeItem 删除保存的状态

vuex-persistedstate 文档和安装说明: https//www.npmjs.com/package/vuex-persistedstate


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

并行计算导论

并行计算导论

Ananth Grama、George Karypis、张武、毛国勇、Anshul Gupta、Vipin Kumar、程海英 / 张武、毛国勇、程海英 / 机械工业出版社 / 2005-1-1 / 49.00元

《并行计算导论》(原书第2版)全面介绍并行计算的各个方面,包括体系结构、编程范例、算法与应用和标准等,涉及并行计算的新技术,也覆盖了较传统的算法,如排序、搜索、图和动态编程等。《并行计算导论》(原书第2版)尽可能采用与底层平台无关的体系结构并且针对抽象模型来设计处落地。书中选择MPI、POSIX线程和OpenMP作为编程模型,并在不同例子中反映了并行计算的不断变化的应用组合。一起来看看 《并行计算导论》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具