如何在 uniapp 里面使用 pinia 数据持久化 (pinia-plugin-persistedstate)

这篇具有很好参考价值的文章主要介绍了如何在 uniapp 里面使用 pinia 数据持久化 (pinia-plugin-persistedstate)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

想要在 uniapp 里面使用 pinia-plugin-persistedstate 会遇到的问题就是 uniapp里面没有浏览器里面的 sessionStorage localStorage 这些 api
我们只需要替换掉 pinia-plugin-persistedstate 默认的储存 api 就可以了。使用 createPersistedState 重新创建一个实例, 把里面的 storage 的参数修改为对应的 uniapp 里面的 storage api 就可以. 已经提取在 customStorage 函数里面了.文章来源地址https://www.toymoban.com/news/detail-715907.html

import 'virtual:uno.css'
import { createSSRApp } from "vue";
import uviewPlus from 'uview-plus'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'
import App from "./App.vue";
export function createApp() {
  const pinia = createPinia()
  pinia.use(customStorage())
  const app = createSSRApp(App);
  app.use(uviewPlus)
  app.use(pinia)
  return {
    app,
    pinia
  };
}

/**
 * @description 自定义pinia持久化api储存方式为 unisetStorageSync
 * @returns 
 */
function customStorage() {
  return createPersistedState({
    storage: {
      getItem(key: string) {
        return uni.getStorageSync(key)
      },
      setItem(key: string, value: any) {
        uni.setStorageSync(key, value)
      }
    }
  })
}

到了这里,关于如何在 uniapp 里面使用 pinia 数据持久化 (pinia-plugin-persistedstate)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • pinia数据持久化,解决刷新state数据丢失

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

    2024年02月11日
    浏览(46)
  • Pinia使用方法及持久化存储

    Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。它跟 Vuex 有一定的相似度,但还是有很大的区别。 愿意看这篇博客的人,想必已经看过了官方文档,官方文档很详细,包含各种使用情景和理论,因此本文不说理论,只说具体的使用方法,想深入研究的建议去

    2024年02月08日
    浏览(52)
  • 快速搞懂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 + 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)
  • uniapp中使用vuex并持久化

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

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

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

    2024年02月13日
    浏览(35)
  • 小程序如何实现登录数据持久化

    在小程序中实现登录数据的持久化可以通过以下几种方式: 使用本地缓存 在用户登录成功后,将登录凭证或用户信息等数据使用  wx.setStorageSync  方法存储到本地缓存中: 在小程序启动时或需要使用登录数据的页面中,通过  wx.getStorageSync  方法读取本地缓存中的数据: 使

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

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

    2024年02月05日
    浏览(46)
  • 如何借助Kafka持久化存储K8S事件数据?

    大家应该对 Kubernetes Events 并不陌生,特别是当你使用 kubectl describe 命令或 Event API 资源来了解集群中的故障时。     尽管这些信息十分有用,但它只是临时的,保留时间最长为30天。如果出于审计或是故障诊断等目的,你可能想要把这些信息保留得更久,比如保存在像 Kafka

    2024年02月05日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包