小记页面刷新vuex的状态丢失问题

本文介绍两种保持Vuex状态不因页面刷新而丢失的方法:一是利用sessionStorage存储和读取状态;二是通过安装并配置vuex-persistedstate插件实现状态持久化。

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

解决方案一、保存到sessionStorage

  • 因为vuex中的数据是保存在内存中的所以页面刷新之后vuex中的状态会丢失,解决方案就是在页面刷新的时候把状态存在sessionStorage中,页面加载的时候再取出来
  • 可以把下面的代码放在App.vuecreated钩子函数中,这样就能保证所有的页面刷新都会走这一步
created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.dispatch("setUserLoginState", JSON.parse(sessionStorage.getItem("store")).isUserLogin);
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  },

解决方案二、使用vuex-persistedstate插件

  • 安装插件:npm install --save vuex-persistedstate

根据自己的vue版本选择

  1. vuex-persistedstate 3.x (for Vuex 3 and Vue 2)
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});
  1. vuex-persistedstate 3.x (for Vuex 4 and Vue 3)
import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});
Vuex中存储用户信息的方法有两种。第一种是将用户信息存储在本地,在页面刷新时从本地获取。第二种是通过路由导航守卫,在用户信息为空时再调用接口获取。 在Vuex中,可以使用commit方法来修改用户信息。例如,使用"SET_USER"方法将接口返回的用户信息存储在Vuex中:this.$store.commit("SET_USER", res.data);其中,"SET_USER"是Vuex中修改用户信息的方法,res.data是要存储的用户数据。 VuexVue的生态系统提供的一个插件,用于进行数据的状态管理。它存储在内存中,并且可以解决浏览器存储的一些问题。首先,Vuex可以监听数据的变化,当数据发生变化时,其他组件可以响应式地监听到该数据的变化,并作出相应的改变。这是通过Vue的响应式机制实现的。其次,Vuex可以存储任意形式的数据,而浏览器存储只能以字符串形式进行传输。最后,Vuex的存储大小没有限制,而浏览器本地存储有一定的存储大小限制。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vuex用户信息的存取](https://blog.youkuaiyun.com/PaPablame/article/details/122727121)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [【开发小记vuex存储用户信息](https://blog.youkuaiyun.com/gyx1549624673/article/details/126753641)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值