浅析Vue如何在页面刷新时保留状态信息

//  vuex中的数据发生改变时触发localStorage的存储操作
localstorage.setItem('state', JSON.stringify(this.$store.state))

//  页面加载的时候在created中获取本地存储中的数据
localStorage.getItem('state') && this.$store.replaceState(JSON.parse(localStorage.getItem('state')));

//   在页面加载时读取sessionStorage里的状态信息

if ( sessionStorage.getItem('state') ) {
  this.$store.replaceState( Object.assign( {}, this.$store.state,
  JSON.parse(sessionStorage.getItem('state') ) ) )
}

//   页面刷新时将state数据存储到sessionStorage中

window.addEventListener('beforeunload',()=>{
  sessionStorage.setItem('state',JSON.stringify(this.$store.state) )
})

window.addEventListener('pagehide', () => {
     sessionStorage.setItem('state', JSON.stringify(this.$store.state))
   })

// 在 store 或组件中
export default {
  data() {
    return {
      myState: JSON.parse(localStorage.getItem('myState')) || '默认值'
    }
  },
  watch: {
    myState: {
      handler(newVal) {
        localStorage.setItem('myState', JSON.stringify(newVal))
      },
      deep: true
    }
  },
  created() {
    // 也可在 created 钩子中读取
    const saved = localStorage.getItem('myState')
    if (saved) this.myState = JSON.parse(saved)
  }
}

npm install vuex-persistedstate

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: null,
    token: '',
    theme: 'light'
  },
  mutations: {
    setUserInfo(state, info) { state.userInfo = info },
    setToken(state, token) { state.token = token },
    setTheme(state, theme) { state.theme = theme }
  },
  plugins: [
    createPersistedState({
      // 可选配置
      key: 'my-app-state',          // 存储的 key
      paths: ['userInfo', 'theme'], // 仅持久化这两个字段（不保存 token 等敏感信息）
      storage: window.localStorage  // 默认 localStorage
    })
  ]
})

npm install pinia-plugin-persistedstate

// store/index.js
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
    token: '',
    theme: 'light'
  }),
  actions: {
    setUserInfo(info) { this.userInfo = info },
    setToken(token) { this.token = token }
  },
  persist: {
    key: 'user-store',        // 存储的 key
    paths: ['userInfo', 'theme'], // 只持久化这两个字段
    storage: localStorage      // 可选 sessionStorage
  }
})

// 手动写法
sessionStorage.setItem('key', value)
let val = sessionStorage.getItem('key')

// 插件中修改 storage 参数
createPersistedState({ storage: window.sessionStorage })