Pinia:pinia官网
pinia-plugin-persistedstate:pinia-plugin-persistedstate官网
Pinia 是一个 Vue.js 状态管理库,它允许你创建一个全局的 store 和多个模块化的子 store 。当你在应用中使用 Pinia 的时候,如果你在组件中修改了 store 中的数据并调用了刷新函数,Pinia 会将 store 中的数据重置为初始值,从而导致数据丢失的问题。
为了避免这个问题,你可以尝试以下方法:
-
使用 Pinia 的
Persist
插件,该插件可以将 Pinia 的 store 数据持久化到本地存储中,这样当你刷新页面时,store 中的数据不会丢失。可以参考文档:https://github.com/posva/pinia/tree/main/packages/persist -
在组件中使用
computed
属性来获取 store 中的数据。由于 computed 属性会在组件重新渲染时重新计算,所以即使你在重新渲染时刷新了 store,你依然可以通过 computed 属性获取到数据。 -
如果你必须要使用刷新函数,你可以将需要保留的数据存储到本地存储或者 cookie 中,然后在刷新后从存储中读取数据并重新设置 store 中的数据。这种方法虽然不太优雅,但是可以在特定情况下解决数据丢失的问题。
以下是使用 Pinia Persist 插件来解决 Pinia 刷新会丢失数据的具体代码演示。
- 安装 Pinia 和 Pinia Persist 插件:
yarn add pinia-plugin-persist
# 或者使用 npm
npm install pinia-plugin-persist
- 在主入口文件中引入并初始化 Pinia 和 Pinia Persist 插件:
import { createPinia } from 'pinia'
import { createPersistPlugin } from '@pinia/persist'
const pinia = createPinia()
pinia.use(createPersistPlugin())
- 在需要持久化的 store 中添加
persist
属性:
import { defineStore } from 'pinia'
export const useMyStore = defineStore({
id: 'myStore',
state: () => ({
data: null,
// ...
}),
persist: true, // 添加 persist 属性
// ...
})
- 现在,通过使用 Pinia Persist 插件,store 中的数据将会自动持久化到本地存储中。当你刷新页面时,store 中的数据将会从本地存储中自动加载。
如果你需要手动操作持久化的数据,可以使用 Pinia Persist 插件提供的 createPersistStorage
函数:
import { createPersistStorage } from '@pinia/persist'
const persistStorage = createPersistStorage({
// 存储前缀
prefix: 'my-app-',
// 存储引擎,可选 localStorage, sessionStorage 或一个自定义存储引擎
// 默认为 localStorage
storage: localStorage,
})
// 将 store 中的数据手动持久化到本地存储中
persistStorage.set('myData', { foo: 'bar' })
// 从本地存储中获取持久化的数据
const myData = persistStorage.get('myData')
方式2:设置 key 、指定保存内容
你可以主动设置 key
名,也可以指定哪些数据保存,默认会保存当前模块全部数据。
export const useUserStore = defineStore('storeUser', {
state: () => ({
name: null,
age: null,
sex: null,
}),
persist: {
enabled: true,
strategies: [
{
key: 'user',
storage: localStorage,
paths: ['name']
},
],
},
})