【持久化存储】VUE2 vuex-persistedstate插件♾️VUE3 pinia的持久化存储pinia-plugin-persistedstate的使用♨️✔️💯

 image

解决Vue项目页面刷新数据丢失的🎈🎈🎈

vuex存储的数据只是在页面中，相当于全局变量，页面刷新时vuex里的数据会重新初始化，导致数据丢失
vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据会被重新赋值 这句话对吧

~~~ ~~~~ 🏀怎么解决呢？🥎~~~ ~~~

1. 浏览器本地存储
  • localStorage - 持久化存储，除非手动清除
  • sessionStorage - 会话级存储，标签页关闭即清除
  • Cookie - 可设置过期时间，随请求发送到服务器

2. Vuex持久化插件

  • Vue2: vuex-persistedstate
  • Vue3 + Pinia: pinia-plugin-persistedstate

✨✨登录完成后，刷新页面vuex的数据（参数）丢失拉~~😅😅😅

image

✨✨解决完后：页面数据再也不会丢失啦啦😁😄😀

image

🏀🥎🏀原理和方法的讲解：

上次我写过一篇关于解决数据丢失问题的小博文~~vue2Vuex持久化插件与localstorage本地存储token，vuex刷新数据丢失问题

 

🌴🌴🌴在 Vue 应用中，持久化存储是指将应用状态（如用户信息、设置、表单数据等）保存在客户端，即使页面刷新或关闭浏览器后数据也不会丢失

⚡一句话概括：因为~Vuex 状态存储在内存中 ==> 利用浏览器存储机制，在数据变化时自动保存，页面加载时自动恢复

♦️监听变化 - 通过 Vuex 的 subscribe 或组件的 watch 监听数据变化

♦️实时保存 - 数据变化时立即保存到 localStorage/sessionStorage

♦️启动恢复 - 页面加载时从存储中读取数据并还原到 Vuex/组件中

🏀可以这样理解吧🥎
Vue Component 
    ↓ (dispatch)
Vuex Action 
    ↓ (commit) 
Vuex Mutation → 状态变更 → 持久化中间件 → 存储到 localStorage
    ↑
Vuex State ← 初始化时从存储恢复 ← 页面加载时读取

♦️关掉浏览器再打开，数据还在

♦️刷新页面，不会丢失进度

♦️就像游戏从来没关过一样

一，VUE3 pinia的持久化存储pinia-plugin-persistedstate插件的使用

pinia-plugin-persistedstate 是一个为 Pinia 状态管理库设计的持久化存储插件，可以让你的 Pinia store 状态在页面刷新后依然保持。常见的持久化方式包括将 Pinia 的状态存储到 localStorage 或 sessionStorage

  • 使用 Pinia 持久化插件

要实现持久化，你可以使用社区提供的插件，例如 pinia-plugin-persistedstate。这个插件可以自动将 Pinia store 的状态保存到浏览器的 localStorage 或 sessionStorage 中，确保刷新页面时保持状态

 

1  安装 pinia-plugin-persistedstate

npm install pinia-plugin-persistedstate
# 或
yarn add pinia-plugin-persistedstate
# 或
pnpm add pinia-plugin-persistedstate

2. 基本使用

2.1  在 main.js/ts 中配置插件
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

const app = createApp(App)
app.use(pinia)
app.mount('#app')
2.2. 在 store 中启用持久化
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '张三',
    age: 25,
    token: ''
  }),
  // 启用持久化
  persist: true
})

2.3 配置选项

你可以通过 persist 对象进行更详细的配置：
export const useUserStore = defineStore('user', {
  state: () => ({
    name: '张三',
    age: 25,
    token: ''
  }),
  persist: {
    key: 'user-store', // 存储的键名，默认为 store 的 id
    storage: localStorage, // 存储位置，默认为 localStorage
    paths: ['name', 'age'], // 只持久化 name 和 age 字段
    beforeRestore: (context) => {
      console.log('Before hydration...', context)
    },
    afterRestore: (context) => {
      console.log('After hydration...', context)
    }
  }
})

常用配置说明

key: 自定义存储的键名

storage: 可以指定为 localStorage、sessionStorage 或自定义存储对象

paths: 指定要持久化的 state 字段

serializer: 自定义序列化方法

beforeRestore/afterRestore: 恢复数据前后的钩子函数

可以查看验证：

二，Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件的使用

Vuex作为Vue的状态管理工具，默认情况下数据存储在内存中，页面刷新或关闭会导致状态丢失。对于需要长期保存的数据（如用户登录状态、主题配置等），数据持久化是必要操作

1. 手动存储方式： 使用 localStorage 或 sessionStorage手动存储

核心思路：在页面刷新前将vuex数据存储到sessionStorage

import Vue from 'vue'
import Vuex from 'vuex'

// 使用 Vuex 插件
Vue.use(Vuex)

// 从 localStorage 初始化 state，如果没有相关数据，则使用默认状态
const initialState = JSON.parse(localStorage.getItem('vuex-state')) || {
  user: null,      // 用户信息，初始为 null
  token: '',       // 认证令牌，初始为空字符串
  settings: {}     // 用户设置，初始为空对象
}

// 创建 Vuex Store 实例
const store = new Vuex.Store({
  state: initialState,  // state 定义了应用的状态树，此处使用从 localStorage 获取的初始状态
  mutations: {         // mutations 定义了如何修改 state 的方法
    setUser(state, user) {        // 设置用户信息
      state.user = user
    },
    setToken(state, token) {      // 设置认证令牌
      state.token = token
    },
    updateSettings(state, settings) {  // 更新用户设置，使用对象展开运算符合并新的设置
      state.settings = {...state.settings, ...settings}
    },
    clearAuth(state) {            // 清除认证信息，将用户信息和令牌重置为初始状态
      state.user = null
      state.token = ''
    }
  },
  actions: {            // actions 可以包含任意的异步操作，但必须通过 commit 来触发 mutation
    login({ commit }, { user, token }) {  // 登录操作，接收上下文和用户信息、令牌作为参数
      commit('setUser', user)             // 提交 setUser mutation 设置用户信息
      commit('setToken', token)           // 提交 setToken mutation 设置令牌
    },
    logout({ commit }) {                  // 登出操作
      commit('clearAuth')                 // 提交 clearAuth mutation 清除认证信息
    }
  }
})

// 订阅 store 变化，每当 state 发生变化时，自动将新的 state 保存到 localStorage
store.subscribe((mutation, state) => {
  localStorage.setItem('vuex-state', JSON.stringify(state))
})

// 导出 store 实例，以便在 Vue 应用中使用
export default store

 2. vuex-persistedstate 插件方式

 2.1 安装
npm install vuex-persistedstate
# 或
yarn add vuex-persistedstate
image
2.2 基础使用
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'  // 引入 vuex-persistedstate 插件

Vue.use(Vuex)  // 使用 Vuex 插件

// 导出 Vuex Store 实例
export default new Vuex.Store({
  state: {  // state 定义了应用的状态树
    user: null,      // 用户信息，初始为 null
    token: '',       // 认证令牌，初始为空字符串
    settings: {}     // 用户设置，初始为空对象
  },
  mutations: {  // mutations 定义了如何修改 state 的方法
    // 你的 mutations
    // 这里可以添加具体的 mutation 方法，例如：
    // setUser(state, user) {
    //   state.user = user
    // },
    // setToken(state, token) {
    //   state.token = token
    // },
    // updateSettings(state, settings) {
    //   state.settings = {...state.settings, ...settings}
    // },
    // clearAuth(state) {
    //   state.user = null
    //   state.token = ''
    // }
  },
  plugins: [  // 插件列表
    createPersistedState()  // 使用 vuex-persistedstate 插件，实现 state 的持久化保存，默认会将 state 保存到 localStorage
  ]
})
2.3 高级配置
2.1 自定义存储键名和位置
createPersistedState({
  key: 'my-vuex-storage', // 存储键名，默认是 'vuex'
  storage: window.sessionStorage // 可以改为 sessionStorage
})
2.2 选择性持久化
createPersistedState({
  paths: ['user', 'token'] // 只持久化 user 和 token 模块
})

简单的来说 可以这么些~~~

 

3. 刷新页面vuex数据丢失问题

3.1原因

vuex存储的数据只是在页面中，相当于全局变量，页面刷新时vuex里的数据会重新初始化，导致数据丢失
vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据会被重新赋值

 3.2 解决思路：

将vuex的数据直接保存在浏览器的缓存中（sessionStorage、localStorage、cookie）
页面刷新后再从浏览器中取出

4.3 解决方法一
4.3.1选择合适的浏览器存储

       localStorage – 永久存储在本地，除非主动删除

       sessionStorage – 存储在当前tab页，关闭当前tab页就会消失

       cookie – 根据设置的有效时间来存储，缺点是内存小不能存储大数据且不易读取，会和后台进行交互

注：一般vue会选择sessionStorage，因为一是vue是单页面应用，操作都是在一个页面跳转路由，二是可以保证打开页面时，sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据

4.3.2 把vuex里的数据保存到sessionStorage中

页面刷新的时候，监听浏览器刷新前事件，在浏览器刷新之前就把vuex里的数据保存到sessionStorage中，刷新成功后如果异步请求的数据未返回则直接获取sessionStorage的数据

4.3.3 Vuex持久化插件(vuex-persistedstate)~推荐

原理：将vuex的state存在浏览器存储中一份，刷新页面的 一瞬间，vuex数据消失，会去浏览器存储中拿回数据

vuex-persistedstate安装使用方法可以网上查资料

***推荐使用Vuex持久化插件(vuex-persistedstate)方法，自动将token和用户信息存储在vuex和localstorage里

来我们的话题：但是一旦页面刷新，vuex的store的这个数据丢失了？？？

image

解决方法：需要同时也在localstorage里存储token数据，vuex的state的数据需要从localstorage获取

image

查看代码 
 export default {
  namespaced: true,
  state:() => ({
    token:localStorage.getItem('token'),
  }),
  mutations:{

    updateToken (state, token) {
      state.token = token
      // 存入 localStorage
      // localStorage.setItem('token', token)
      localStorage.setItem('token',token)
    },
  },
  actions:{},
  getters:{}
}

 数据不会再丢失了~~OK

 image

 

posted @ 2025-06-24 11:06  Mahmud*小麦*  阅读(397)  评论(0)    收藏  举报