taro + pinia + pinia-plugin-persistedstate 持久化方案

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

使用taro开发小程序项目，正好想着使用pinia来进行持久化保存，使用正常的初始化后，进行编译后报错了，localstorage找不到，这就大条了，只能改写内部的storage，下面是代码：

---

一、app.js

import { createApp } from "vue";
import { createPinia } from "pinia";
import { createPersistedState } from "pinia-plugin-persistedstate";
import { getStorageSync, setStorageSync, removeStorageSync } from "@tarojs/taro";

import "./app.scss";

const App = createApp({
  onShow(options: any) {},
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
});
const pinia = createPinia();
// 改写storage，使用taro提供的api
const storage = {
  getItem: (key: string) => getStorageSync(key),
  setItem: (key: string, value: any) => setStorageSync(key, value),
  removeItem: (key: string) => removeStorageSync(key)
}
pinia.use(createPersistedState({
  auto: true,
  storage: storage
}));

App.use(pinia);

export default App;

二、使用

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => {
    return { count: 0 };
  },
  actions: {
    increment() {
      this.count++;
    },
  },
  // 配置持久化
  persist: {
    key: "counter",
    paths: ["count"]
  },
});