Pinia刷新页面数据丢失，解决方案

前言

在项目中使用了pinia，存储完数据之后，页面刷新后数据就丢失了！针对这个问题，简单解决并记录一下。如图所示，刷新前存在权限，刷新后权限丢失

解决方案

本方案使用vue3+ts，使用pinia-plugin-persist插件进行解决

1、添加依赖

在package.json文件中，添加完之后再install一下

"pinia-plugin-persist": "^1.0.0"

或者，你直接安装

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

2、使用插件

在store/index.ts文件中

import type { App } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPersist)
export const setupStore = (app: App<Element>) => {
  app.use(store)
}
export { store }

3、添加配置

在你想要持久化存储的module上添加上如下配置，key自己定义

persist: {
    enabled: true,
    strategies: [{ key: 'user', storage: localStorage }]
  },

或者，不指定key，也是可以的

persist: {
    enabled: true
  },

关于pinia

可能很多人，还不知道这个东西，与 Vuex 相比，Pinia 提供更简单的 API，也提供了符合组合式 API 风格的 API，最重要的是，搭配 TypeScript 一起使用时有非常可靠的类型推断支持。【主要是简单了！！！】

Pinia API 与 Vuex(<=4) 也有很多不同，即：

• mutation 已被弃用。它们经常被认为是极其冗余的。它们初衷是带来 devtools 的集成方案，但这已不再是一个问题了。
  无需要创建自定义的复杂包装器来支持 TypeScript，一切都可标注类型，API 的设计方式是尽可能地利用 TS 类型推理。
• 无过多的魔法字符串注入，只需要导入函数并调用它们，然后享受自动补全的乐趣就好。
• 无需要动态添加 Store，它们默认都是动态的，甚至你可能都不会注意到这点。注意，你仍然可以在任何时候手动使用一个 Store 来注册它，但因为它是自动的，所以你不需要担心它。
• 不再有嵌套结构的模块。你仍然可以通过导入和使用另一个 Store 来隐含地嵌套 stores 空间。虽然 Pinia 从设计上提供的是一个扁平的结构，但仍然能够在 Store 之间进行交叉组合。你甚至可以让 Stores 有循环依赖关系。
• 不再有可命名的模块。考虑到 Store 的扁平架构，Store 的命名取决于它们的定义方式，你甚至可以说所有 Store 都应该命名。

以上选自官网：https://pinia.vuejs.org/zh/