uniapp 开发小程序 pinia数据持久化失败解决方案 pinia-plugin-persistedstate

!!!!!!!将 persist的存储方式转成 uni的存储方法就可以了,如图

import {defineStore} from 'pinia';
import {ref} from "vue";

export default defineStore('userInfoStore', () => {

    const userInfo = ref<{
      token: string,
      uid: string,//用户ID
      depth: string //层级深度
    }>()


    return {
      userInfo
    }
  },
  {
    //persist: true//开启数据持久化
    persist: {//使用uniapp中数据存储方法
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, val) {
          uni.setStorageSync(key, val)
        }
      }
    }
  }
);

---

1.安装pinia-plugin-persistedstate

pnpm install pinia-persistedstate

2.创建src/stores/index.ts

import {createPinia} from 'pinia';

const pinia = createPinia()
// vue3持久化
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
pinia.use(piniaPluginPersistedstate)


// 默认导出给main.ts使用
export default pinia

3.main.ts中引入 

// 导入 pinia 实例
import pinia from "./stores/index";
import registerDirectives from '@/directives'

export function createApp() {
  const app = createSSRApp(App);
  app.use(pinia);
  return {
    app
  };
}

4.创建使用src/stores/modules/userInfo.ts

import {defineStore} from 'pinia';
import {ref} from "vue";

export default defineStore('userInfoStore', () => {

    const userInfo = ref<{
      token: string,
      uid: string,//用户ID
      depth: string //层级深度
    }>()


    return {
      userInfo
    }
  },
  {
     persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, val) {
          uni.setStorageSync(key, val)
        }
      }
    }
  }
);