【vue && vuex】vuex中的数据同步到localStorage和sessionStorage

最新推荐文章于 2025-05-08 16:20:04 发布

谭CV

最新推荐文章于 2025-05-08 16:20:04 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签：前端 vuex persistedstate vuex同步到Storage 插件

本文链接：https://blog.youkuaiyun.com/THcoding_Cat/article/details/109914232

版权

前端专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何使用 vuex-persistedstate 插件解决 Vuex 数据在页面刷新时丢失的问题。并通过实例演示如何将不同数据分别存储在 localStorage 和 sessionStorage 中，以适应不同的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

懒，所以我使用插件。可是，要面对的就是对插件的一知半解。

大家都知道vuex中存储的数据在刷新地址栏时，会被销毁，故而vuex不能一直保持状态的存储。

其实手写代码去改造这一点是最好的，但我选择插件。使用的是vuex-persistedstate。

1.安装插件

npm i vuex-persistedstate

2.默认使用

该插件默认将数据存储到localStorage中。

在store/index.js中使用：

import createPersistedState from "vuex-persistedstate";


const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

但有些项目并不满足于将数据存储在localStorage中。希望将一部分数据存储到localStorage，一部分数据存储到sessionStorage中（真能为难人）。

举例：比如用户登录方面有个记住密码的功能，很多时候前端的实现都是通过将token存储在cookie中，将用户的userId存储在vuex(localStorage)中。

正是因为用户在记住密码的情况下，并没有所谓的真正的“记住密码”，所以记住密码不是一种真的登录，于是userId不能从后台获取，但又要在“记住密码”的状态

下进入系统，拿到用户的权限和信息，所以放到localStorage中更合适。但其他的数据放到sessionStorage更为保险，恩。。。（前端的安全机制。。。就。。我觉得又扯又多余）

3.将数据分开存储到localStorage和sessionStorage

以我当前逻辑，有一个问题，就是userId和userInfo是在一个数据结构中的，他们应该是属于user.js这个模块的，是同一个state中。但是这里我尝试过在同一个state中将userInfo的userId单独存在localStorage中，userInfo剩余数据存在sessionStorage中。不清楚是怎么回事，页面全部关闭，localStorage中的userId会被清除掉。所以这里我将userId单独存一份state，并将这个小模块存在localStorage中才得以实现。

//reducer方法拿到的vuexState是哪怕是分模块后的state的所有的状态
// 创建插件实例 这里单独存储userId，并且使用delete删除
//我在这里面直接使用点语法来返回，并没有起到作用
const localPersisted = createPersistedState({
  key: 'userId',
  storage: window.localStorage,
  reducer: (vuexState) => {
    let localState = Object.assign({}, vuexState);
    for (let key in localState) {
        if (key !== 'userId') {
          delete localState[key];
        }
    }
    return localState;
  }
});

//sessionLoStorage存储所有的数据（除了单独的userId的模块）
const sessionPersisted = createPersistedState({
  storage: window.sessionStorage,
  reducer: (vuexState) => {
    let sessionState = Object.assign({}, vuexState);
    for (let key in sessionState) {
      if (key === 'userId') {
        delete sessionState[key];
      }
    }
    return sessionState;
  }
});


export default new Vuex.Store({
  ...,
  plugins: [localPersisted,sessionPersisted]  //插件实例的配置
})

该博客基于掘金的一篇博客，地址忘了，这两天补上。