小记页面刷新vuex的状态丢失问题_vuex页面刷新状态消失-优快云博客

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

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

解决方案一、保存到sessionStorage

因为vuex中的数据是保存在内存中的所以页面刷新之后vuex中的状态会丢失，解决方案就是在页面刷新的时候把状态存在sessionStorage中，页面加载的时候再取出来
可以把下面的代码放在App.vue的created钩子函数中，这样就能保证所有的页面刷新都会走这一步

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版本选择

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()],
});

vuex-persistedstate 3.x (for Vuex 4 and Vue 3)

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});