vue3中pinia数据持久化不用插件

在 Vue3 中使用 Pinia 进行数据持久化，如果不想依赖第三方插件，可以手动处理数据存储和恢复的过程。Pinia本身并不直接提供持久化的功能，但是你可以结合浏览器的 localStorage 或者 IndexedDB 来实现这个需求。以下是一个简单的示例：

1. 创建 `store.js` 文件，定义你的 state 和 getters:

import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', {
  state() {
    return {
      myData: JSON.parse(localStorage.getItem('myData') || '[]'),
    };
  },
  async saveData(data) {
    localStorage.setItem('myData', JSON.stringify(data));
  },
});

2. 在需要的地方获取并设置数据：

const store = useMyStore();
// 获取数据
const data = store.myData;
// 更新数据
store.saveData([...data, newData]);

3. 如果应用退出（如用户关闭浏览器窗口），记得在生命周期钩子中保存数据：

beforeCreate() {
  window.addEventListener('beforeunload', () => {
    this.saveData(this.myData);
  });
},

这样每次刷新页面或关闭再打开时，你的数据都会从本地存储恢复。