uniapp微信小程序开发踩坑日记：Pinia持久化

时间：2024-02-16 07:26:01

如果你使用过Pinia，那你应该知道Pinia持久化插件：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

但由于官方文档提供的说明并不是针对小程序开发，所以我们在使用这个插件实现uniapp小程序开发中Pinia持久化会出现问题

我在CSDN上看了各种文章，在B站上刷了各种视频，AI也被我问烂了，最后将各种资源糅合在一起，拼凑出了一套完整的解决方案，搜索资源的能力真的很重要！

以上是闲聊（手动狗头），以下是uniapp微信小程序开发实现Pinia持久化的完整方法（阅读此文章请结合Pinia持久化插件官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/）

1、安装依赖

这一步安装官方文档来就好（官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/）

2、将插件添加到 pinia 实例上

在main.js中加入如下代码

//将pinia持久化插件添加到pinia实例上
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //导入pinia持久化插件
const pinia = createPinia()
app.use(pinia.use(piniaPluginPersistedstate)); //pinia插件的安装配置（千万别忘了这步！！！）

3、用法

这一步与官方文档有所不同，插件默认使用 localStorage 实现持久化，小程序端不兼容，需要替换持久化 API

组合式API下，配置持久化的具体代码如下（主要式persist的部分和官方文档不同），选项式API也类似：

import { defineStore } from 'pinia'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
  // 配置持久化
  persist: {
    // 调整为兼容多端的API
    storage: {
      setItem(key, value) {
        uni.setStorageSync(key, value) // [!code warning]
      },
      getItem(key) {
        return uni.getStorageSync(key) // [!code warning]
      },
    },
  },
},
)

完成以上三个步骤后，所有Pinia仓库中的数据都会被保存在本地

相关文章