vue3+ts+pinia项目实现数据持久化配置

前言：

在AI的协助下，捣鼓了好一会儿才搞定，遇到了配置persist单词拼错的，也有main.ts文件没配的，最后一步步排查所有问题才搞定了。这里就贴下所有相关的配置，也希望其他网友些博文的时候留意一点，尽量把所有相关的配置都写上，有时候关键的东西漏一点都够人排查好久的。

需要安装的插件：

npm install pinia-plugin-persistedstate

或者

yarn add pinia-plugin-persistedstate

无需携带--save，插件安装后会自动保存到package.json的dependencies中。

需要改动的文件：

1.store/index.ts

import { defineStore, createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

// 第一步：创建 Pinia 实例
const pinia = createPinia();
// 第二步：注册持久化插件（必须在定义 Store 之前）
pinia.use(piniaPluginPersistedstate);
// 第三步：导出pinia
export default pinia;

//底部菜单选中状态管理
export const tabBarStore = defineStore("tabBarStore", {
  state: () => {
    return {
      menuIndex: 0,
    };
  },
  //数据持久化配置
  persist: {
    storage: sessionStorage,
  },
  actions: {
    changeTabBar(data) {
      this.menuIndex = data;
    },
  },
});

注：加粗部分为修改/新增代码

2.main.ts

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import "vant/lib/index.css";
import pinia from "./store/index";

const app = createApp(App);

app.use(Error); // 全局节点挂载
app.use(router).use(pinia).mount("#app");

如上配置，组件中调用store，sessionStorage中应该就会有 menuIndex  的值了：

后记：

组件中的调用基本不用修改，按照之前的写法就行。这里仅介绍基础配置，其实大部分项目也够用了，更多自定义配置可以直接寻求AI帮助。