vue3+ts+vite+pinia数据持久化

1 安装持久化插件 npm install pinia-plugin-persistedstate
2 在 Pinia 初始化时启用插件
mian.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router"; // 引入路由配置
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"; **//数据持久化插件**
const store = createPinia();
store.use(piniaPluginPersistedstate); // 启用插件
import Vant from "vant";
import "vant/lib/index.css";
createApp(App).use(store).use(Vant).use(router).mount("#app");

3 store 中持久化插件

import { defineStore } from "pinia";
interface Singer {  //定义对象中属性的类型，不然使用的时候会报错
  id: string;
  name: string;
  avatar: string;
}
export const useSingerStore = defineStore("singer", {
  state: () => ({
    singer: {} as Singer, // 初始化时指定类型
  }),
  actions: {
    setSinger(data: Singer) { // 定义传参类型，
      this.singer = data;
    },
  },
  persist: true, ****// 开启持久化（默认用 localStorage）****
});