背景

我们使用pinia的时候，会遇到页面刷新的时候数据丢失，我们自己解决的话，就是在页面刷新之前将数据存储到本地，然后在页面打开的时候将数据从本地读出来，实现数据持久化。

所以我们可以通过插件来直接帮我们完成这个操作来实现自动化存储。

学习pinia资料

（学习笔记）抛弃 Vuex，使用 Pinia__揽的博客-CSDN博客

（学习笔记）抛弃 Vuex，使用 Pinia__揽的博客-CSDN博客

一、安装插件 

yarn add pinia-plugin-persistedstate
# 或
npm i pinia-plugin-persistedstate

二、使用插件（main.js）

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

三、模块开启持久化

const useHomeStore = defineStore("home",()=>{
...
},
// defineStore 第三个参数
  {
    // 添加配置开启 state/ref 持久化存储
    // 插件默认存储全部 state/ref
    persist: true,
  }
);