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

如果你使用过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中加入如下代码

javascript 复制代码
//将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也类似:

javascript 复制代码
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仓库中的数据都会被保存在本地

相关推荐
八月ouc5 分钟前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
苏琢玉9 分钟前
从 Hexo 到 Astro:重构我的个人博客
前端·hexo
街尾杂货店&15 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈17 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
Q_Q51100828544 分钟前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
李慕婉学姐1 小时前
【开题答辩过程】以《自习室预约微信小程序》为例,不会开题答辩的可以进来看看
微信小程序·小程序
金梦人生1 小时前
Css性能优化
前端·css
Holin_浩霖1 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 小时前
CSS属性继承与特殊值
前端·css