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

这篇具有很好参考价值的文章主要介绍了pinia数据持久化,解决刷新state数据丢失。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  1. 下载插件
    插件 pinia-plugin-persist 可以辅助实现数据持久化功能。
npm i pinia-plugin-persist  安装
  1. 安装插件
    在入口文件main.js中
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'element-plus/es/components/message/style/css'
import './assets/main.css'
import { createPinia } from 'pinia'//引入pinia
import piniaPluginPersist from 'pinia-plugin-persist'//引入pinia数据持久化插件
const app = createApp(App)
app.use(router)
app.use(createPinia().use(piniaPluginPersist))//安装插件
app.mount('#app')

  1. 配置数据持久化
import { defineStore } from 'pinia'
export const useStore = defineStore('managestate', {
  persist: {
    enabled: true,//开启数据持久化
    strategies: [
      {
        key: 'managestate',//给一个要保存的名称
        storage: localStorage,//sessionStorage / localStorage 存储方式
      }
    ]
  },
  
  state() {}
  },
  getters: {}
  },
  actions: {}
  }
})
  1. 数据已经存储到了本地
    pinia数据持久化,解决刷新state数据丢失

文章来源地址https://www.toymoban.com/news/detail-511224.html

到了这里,关于pinia数据持久化,解决刷新state数据丢失的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

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

    想要在 uniapp 里面使用 pinia-plugin-persistedstate 会遇到的问题就是 uniapp里面没有浏览器里面的 sessionStorage localStorage 这些 api 。 我们只需要替换掉 pinia-plugin-persistedstate 默认的储存 api 就可以了。使用 createPersistedState 重新创建一个实例, 把里面的 storage 的参数修改为对应的 uniapp

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

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

    2024年02月08日
    浏览(52)
  • uniapp项目实战第五章:小程序Pinia持久化

    说明:项目中 Pinia 用法平时完全一致,主要解决持久化插件 兼容性 问题。 持久化存储插件 持久化存储插件: pinia-plugin-persistedstate 插件默认使用 localStorage 实现持久化,小程序端不兼容,需要替换持久化 API。 网页端持久化 API 多端持久化 API 参考代码 现在可以持续化了

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

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

    2024年02月13日
    浏览(34)
  • vue3使用pinia和pinia-plugin-persist做持久化存储

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

    2024年02月13日
    浏览(39)
  • 前端开发小技巧 - 【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日
    浏览(52)
  • 从零开始Vue3+Element Plus后台管理系统(六)——状态管理Pinia和持久化

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

    2024年02月05日
    浏览(43)
  • 【RabbitMQ笔记08】消息队列RabbitMQ之防止消息丢失的三种方式(生产者消息确认、消费者消息确认、消息持久化)

    这篇文章,主要介绍消息队列RabbitMQ之防止消息丢失的三种方式(生产者消息确认、消费者消息确认、消息持久化)。 目录 一、防止消息丢失 1.1、消息确认机制(生产者) (1)生产者丢失消息 (2)生产者消息确认机制 1.2、消息确认机制(消费者) (1)消费者丢失消息

    2024年02月02日
    浏览(48)
  • flutter:数据持久化

    保存数据到本地磁盘是应用程序常用功能之一,比如保存用户登录信息、用户配置信息等。而保存这些信息通常使用 shared_preferences ,它保存数据的形式为 Key-Value (键值对),支持 Android 和 iOS。 shared_preferences 是一个第三方插件,在 Android 中使用 SharedPreferences ,在 iOS中使用

    2024年02月09日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包