Pinia刷新会丢失数据 应该怎么解决

Pinia:pinia官网

pinia-plugin-persistedstate:pinia-plugin-persistedstate官网

Pinia 是一个 Vue.js 状态管理库，它允许你创建一个全局的 store 和多个模块化的子 store 。当你在应用中使用 Pinia 的时候，如果你在组件中修改了 store 中的数据并调用了刷新函数，Pinia 会将 store 中的数据重置为初始值，从而导致数据丢失的问题。

      为了避免这个问题，你可以尝试以下方法：

1. 使用 Pinia 的 Persist 插件，该插件可以将 Pinia 的 store 数据持久化到本地存储中，这样当你刷新页面时，store 中的数据不会丢失。可以参考文档：https://github.com/posva/pinia/tree/main/packages/persist

2. 在组件中使用 computed 属性来获取 store 中的数据。由于 computed 属性会在组件重新渲染时重新计算，所以即使你在重新渲染时刷新了 store，你依然可以通过 computed 属性获取到数据。

3. 如果你必须要使用刷新函数，你可以将需要保留的数据存储到本地存储或者 cookie 中，然后在刷新后从存储中读取数据并重新设置 store 中的数据。这种方法虽然不太优雅，但是可以在特定情况下解决数据丢失的问题。

以下是使用 Pinia Persist 插件来解决 Pinia 刷新会丢失数据的具体代码演示。

1. 安装 Pinia 和 Pinia Persist 插件：

yarn add pinia-plugin-persist -D
# 或者使用 npm
npm install pinia-plugin-persist -D

1. 在主入口文件中引入并初始化 Pinia 和 Pinia Persist 插件：

import { createPinia } from 'pinia'
import { createPersistPlugin } from '@pinia/persist'

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

1. 在需要持久化的 store 中添加 persist 属性：

import { defineStore } from 'pinia'

export const useMyStore = defineStore({
  id: 'myStore',
  state: () => ({
    data: null,
    // ...
  }),
  persist: true, // 添加 persist 属性
  // ...
})

1. 现在，通过使用 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'] 
      },
    ],
  },
})