页面刷新后,vuex中数据丢失、清空的解决方案 vuex-persistedstate

场景之一

应用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

原文链接:segmentfault.com

上一篇:JavaScript 工厂函数 vs 构造函数
下一篇:vue项目打包后上传至GitHub,并实现github-pages的预览

相关推荐

  • 骚操作!在react中使用vuex

    原文地址 前言 笔者最近在学习使用react,提到react就绕不过去redux。redux是一个状态管理架构,被广泛用于react项目中,但是redux并不是专为react而生,两者还需要react...

    2 年前
  • 速览vuex源码

    Vuex 源码不过千行,主要使用了 Store 类、ModuleCollection 类、Module 类,结构清晰,下面简单说说 Vuex 中一些主要的源码实现。推荐打开 Vuex 源码一同观看。

    6 个月前
  • 逐行粒度的vuex源码分析

    了解vuex 什么是vuex vuex是一个为vue进行统一状态管理的状态管理器,主要分为state, getters, mutations, actions几个部分, vue组件基于state进行...

    2 年前
  • 跟我一起从0到1编写一个自己的Vuex

    前言 在前端工程化开发的今天,vuex、redux成为了我们项目中状态管理的上上之选。关于如何使用它,相信这已经成为前端开发者的必备技能之一了。今天,我们来一起尝试进阶一下,自己实现一个状态管理器来...

    8 个月前
  • 谈谈数据状态管理和实现一个简易版vuex

    本文在github做了收录 github.com/Michael-lzg… 掘金同文:https://juejin.im/post/6866964944634511368数据状态管理首先说说什么叫“...

    2 个月前
  • 记录vuex module 模块化分割

    参考官网例子,加深下vuex的学习。 随着项目的复杂度增大,为了方便管理vuex,一般会将其按功能分割成不同的模块,方便日后管理,先看下整体的目录结构: 目录结构 store里面暂时弄了common...

    2 年前
  • 解决uni-app使用vuex刷新后数据失效

    vuex的数据是可以响应式更新,但是刷新数据就会失效。 缓存的数据刷新后不会丢失,但是不会响应式更新。 所以可以利用二者优劣势相结合解决vuex刷新后数据丢失 思路: 在存vuex数据的时候顺便存进缓...

    1 年前
  • 解决Vuex存储数据之后,刷新页面数据消失

    解决方法如下 基本思路: 在刷新页面前对state根状态进行存储,在Vue实例再次被创建时以此替换state根状态。代码如下: created() { console.log(sessio...

    6 个月前
  • 解决Vuex刷新重置,关闭窗口重置

    Vuex结合sessionStorage存储公用的用户信息 前言 在一个系统中,我们经常会用到用户的用户名、用户手机号、用户ID等信息,可以将它们用于展示在系统中或者根据ID获取权限之类。

    5 个月前
  • 简单说说vue的父子组件,父子组件传值和vuex

    一、vue的父子组件之间是如何传值的? 首先呢,需要说说的是,vue既然有双向绑定,那为何会有父子组件之间的传值问题?这个问题也简单,vue的组件会供其他的vue页面进行调用,如果数组都是双向绑定的话...

    2 年前

官方社区

扫码加入 JavaScript 社区