uniapp项目实战第五章:小程序Pinia持久化

这篇具有很好参考价值的文章主要介绍了uniapp项目实战第五章:小程序Pinia持久化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序Pinia持久化

说明:项目中 Pinia 用法平时完全一致,主要解决持久化插件兼容性问题。

持久化存储插件

持久化存储插件: pinia-plugin-persistedstate

插件默认使用 localStorage 实现持久化,小程序端不兼容,需要替换持久化 API。

网页端持久化 API

// 网页端API
localStorage.setItem()
localStorage.getItem()

多端持久化 API

// 兼容多端API
uni.setStorageSync()
uni.getStorageSync()

参考代码
uniapp项目实战第五章:小程序Pinia持久化,uni-app学习之旅,uni-app,小程序

// stores/modules/member.ts
export const useMemberStore = defineStore(
  'member',
  () => {
    //…省略
  },
  {
    // 配置持久化
    persist: {
      // 调整为兼容多端的API
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value) // [!code warning]
        },
        getItem(key) {
          return uni.getStorageSync(key) // [!code warning]
        },
      },
    },
  },
)
  • 现在可以持续化了
    uniapp项目实战第五章:小程序Pinia持久化,uni-app学习之旅,uni-app,小程序

uniapp项目实战第五章:小程序Pinia持久化,uni-app学习之旅,uni-app,小程序文章来源地址https://www.toymoban.com/news/detail-789838.html

到了这里,关于uniapp项目实战第五章:小程序Pinia持久化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 项目实战 — 消息队列(4){消息持久化}

    目录  一、消息存储格式设计        🍅 1、queue_data.txt:保存消息的内容         🍅 2、queue_stat.txt:保存消息的统计信息 二、消息序列化 三、自定义异常类 四、创建MessageFileManger类 🍅 1、约定消息文件所在的目录和文件名字  🍅 2、队列的统计信息 🍅 3、创建队列对应

    2024年02月14日
    浏览(41)
  • 【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用

    刷新浏览器后,重新加载页面时会重新初始化 vue、 pinia,而 pinia 中状态的值仅在内存中存在,而刷新导致浏览器存储中的数据就没了。 在实际开发中,浏览器刷新时,有些数据希望是保存下来的。如用户登录后,用户信息会存储在全局状态中,如果不持久化状态,那么每次

    2024年02月07日
    浏览(44)
  • pinia数据持久化,解决刷新state数据丢失

    下载插件 插件 pinia-plugin-persist 可以辅助实现数据持久化功能。 安装插件 在入口文件main.js中 配置数据持久化 数据已经存储到了本地

    2024年02月11日
    浏览(46)
  • 快速搞懂Pinia及数据持久化存储(详细教程)

    一.安装及使用Pinia 1.安装Pinia两种方式都可,根据个人习惯来 2.在main.ts 中引入并挂载到根实例 3.src目录下新建store/study/index.js并写入 Store 是用defineStore()定义的,它的第一个参数是一个独一无二的id,也是必须传入的,Pinia 将用它来连接 store 和 devtools。 defineStore()第二个参数可

    2023年04月15日
    浏览(45)
  • vue3使用pinia和pinia-plugin-persist做持久化存储

    插件和版本 src/store/home.js(可直接复制) 参考文章1 参考2 参考3

    2024年02月13日
    浏览(41)
  • Vue3状态管理库Pinia——自定义持久化插件

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月13日
    浏览(36)
  • 前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia,实现 Pinia 的持久化,优化Pinia(仓库统一管理)

    ts 中使用 pinia 和 Vue3 基本一致,唯一的不同点在于,需要根据接口文档给 state 标注类型,也要给 actions 标注类型; 以下都是 组合式API 的写法, 选项式API 的写法大家可以去官网看看; Pinia; 持久化插件 - pinia-plugin-persistedstate; 目标文件: src/types/user.d.ts (这里以 user.d.t

    2024年04月09日
    浏览(55)
  • 从零开始Vue3+Element Plus后台管理系统(六)——状态管理Pinia和持久化

    官网:https://pinia.vuejs.org/zh/ Pinia 是 Vue 的专属状态管理库,相比Vuex更好用,优点不多了说官网有,用起来最重要! 在应用的根部注入创建的 pinia 定义store,拿用户登录举个简单例子 在src目录新建文件夹store,然后新建文件user.ts 在Vue页面中使用Pinia 如果我们把登录用户的信息

    2024年02月05日
    浏览(46)
  • uniapp中使用vuex并持久化

    目录 文章目录 准备 一、插件实现 1.安装插件  2.index.js配置: 3.获取持久化数据(比如登录页): 4.使用state(比如个人主页): 二、本地存储实现 总结 根目录下创建store文件夹,内部创建index.js 地址:vuex-persistedstate - npm 代码如下(示例): 插件的api说明: key: 存储持久

    2024年02月09日
    浏览(55)
  • 【RabbitMQ 实战】10 消息持久化和存储原理

    rabbitmq的持久化分为三个部分: 交换器的持久化。 队列的持久化。 消息的持久化。 1.1.1 交换器持久化 交换器的持久化是通过在声明交换器时, 指定Durability参数为durable实现的。 若交换器不设置持久化,在rabbitmq服务重启之后,相关的交换器元数据会丢失,但消息不会丢失,

    2024年02月07日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包