pinia的用法,一篇文章教你搞懂vuex的继任者pinia

news2024/11/26 22:27:12

一:pinia是什么?

      Pinia 是一个轻量级的、易于使用的 Vue.js 状态管理库。它是 Vuex 的一个替代方案,专为 Vue 3 设计,提供了更简单的 API 和更好的 TypeScript 支持。在你提供的代码中,Pinia 被用于管理应用程序的状态。

二:如何使用

  1. npm i pinia  安装pinia
  2. 在main.js文件中导入并使用,如下图:
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
const pinia=createPinia()
createApp(App).use(pinia).mount('#app')

        3. 创建一个pinia文件夹,文件夹内创建一个文件

 4.文件内定义数据与方法,pinia与vuex相比,pinia和vue3一样,有组合式和选项式写法,

        选项式写法如下:

        

 组合式写法如下:

 !!!!!组合式写法中没有this了,在上图中this.num++忘记更改回来了,正确写法是num.value++,不好意思

在模板中使用:如下

 还可以进一步修改代码,不用一层一层的点.调用了,写法如下:

三:持久化插件

因为无论是vuex还是pinia,数据都不是持久保存的,刷新页面或切换页面会丢失数据,还需要用浏览器本地缓存,略嫌麻烦,在这里介绍一个pinia持久化存储插件,步骤如下:

        1:安装:npm i pinia-plugin-persistedstate

        2:在main.js中配置并使用

 3:在仓库中设置配置项,也就是pinaia需要持久化存储的文件,

 只需要加入这一个配置项,数据即可自动存入本地缓存,效果如下

个人更喜欢使用组合式写法,不论是vue3还是pinia,代码简洁明了,业务逻辑更加聚合

以上就是我个人对pinaia的使用总结,如有不对和欠缺还请各位指正,谢谢阅读

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/608114.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VAO、VBO、EBO简介

1.顶点缓冲对象(Vertex Buffer Objects, VBO) 顶点缓冲对象(VBO)的作用就是管理这个在GPU上创建的显存。使用这些缓冲对象的好处是我们可以一次性的发送一大批数据到显卡上,而不是每个顶点发送一次。从CPU把数据发送到显卡相对较慢&#xff…

java.security.MessageDigest的用法

java.security.MessageDigest MessageDigest的含义 message含义是:消息,信息 digest的含义是 digest 必应词典 n.摘要;文摘;概要;汇编 v.消化;领会;领悟;理解 海词 n. 摘要 vt. 消化;理解 vi…

进制转换(及规律)

Java变量命名规则和前端一样 约束 接口使用大驼峰 变量方法小托福 常量全大写 数值类型的 整型 byte a 1 所占空间1字节(-128-127) short a 1 所占空间2字节(-32768-32767)2^15-2^15-1 int a 1 所占空间4…

2023 华为 Datacom-HCIE 真题题库 11/12--含解析

单项选择题 1.[试题编号:190685] (单选题)通过iMasterNCE-Campus部署的虚拟化园区网络场景中,以下关于“添加设备”的描述中,错误的是哪一项? A、IMaster NCE-Campus支持通过设备角色添加设备 B、IMaster …

装饰器Python】进阶知识点

要明白装饰器首先得知道闭包 闭包:是内部函数对外部函数作用域的引用,并且一般外部函数函数的返回值是内部函数的函数名 def outer(x): # 外部函数 a x * 2 def inter(b) # 内部函数 …

手撕数据结构—单链表

✅作者:简单^不简单 🔥系列专栏:C语言数据结构 💖如果文章有错误,时刻欢迎大家的指正。当然觉得博主的文章还不错的话,请点赞👍收藏⭐️留言📝 💬格言:希望我…

设计模式之-模板方法模式C++实现与C++模板template用法

介绍 模板方法模式使用比较常见,也比较简单,模板方法模式是属于设计模式中的行为设计模式。行为设计模式是关注对象的行为或者交互方面的内容,主要涉及算法和对象之间的职责分配。 模板方法模式使用场景:在设计需求中,…

java并发编程:synchronized关键字与锁详解

文章目录 线程安全问题synchroinzed关键字几种锁Java对象头偏向锁轻量级锁自旋锁重量级锁锁升级的场景 JVM 是如何实现 synchronized 的?小结 这篇文章我们来聊一聊Java多线程里面的“锁”。 首先需要明确的一点是:Java多线程的锁都是基于对象的&#x…

御用飞场之惊险炸鸡寻根溯源

御用飞场之惊险炸鸡寻根溯源 1. 源由2. 分析3. 证据4. 总结5. 补充:BetaFlight Mark4 自锁螺母桨叶松动 炸机瞬间 1. 源由 这个炸鸡的原因千奇百怪,不过最终的结果都是相似的。 如果能很好的找到根原因,相对来说,今后炸鸡的概…

element-ui表格el-table的使用

先给大家展示一下效果 Table 属性 属性名说明类型可选值默认值data显示的数据array——heightTable 的高度, 默认为自动高度。 如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则这个高度会设置为 Table 的 sty…

初阶指针(详解)

目录 前言 一 指针是什么 计算机又是如何编址的? 总结 二 指针和指针类型 指针-整数 总结: 指针的解引用 总结 三 野指针 概念 野指针的成因 1. 指针未初始化 2. 指针越界访问 3. 指针指向的空间被释放 如何规避野指针 四 指针运算…

iMazing2.16.9中文最新版iOS设备管理器下载教程

iMazing2.16.9是一款兼容Win和Mac的iOS设备管理软件。iMazing能够将音乐、文件、消息和应用等数据从任何 iPhone、iPad 或 iPod 传输到 Mac 或 PC 上。iMazing轻松管理和备份您的 iOS 设备,无需使用 iTunes,iMazing以自己的方式管理 iPhone。让备受信赖的软件为您传…

遗传算法(附简单案例及matlab详细代码)

作者:非妃是公主 专栏:《智能优化算法》 博客地址:https://blog.csdn.net/myf_666 个性签:顺境不惰,逆境不馁,以心制境,万事可成。——曾国藩 文章目录 专栏推荐序一、生物进化二、遗传算法原…

华为OD机试真题 Java 实现【按身高和体重排队】【2022Q4 100分】,附详细解题思路

一、题目描述 某学校举行运动会,学生们按编号(1、2、3…n)进行标识,现需要按照身高由低到高排列,对身高相同的人,按体重由轻到重排列; 对于身高体重都相同的人,维持原有的编号顺序关系。请输出排列后的学生…

全闪SDS三节点EC(4+2:1)性能挑战测试

前段时间咱们存储圈在讨论一下全闪SDS性能挑战: 三节点集群,用EC(42:1),性能目标是:4KB随机读写7:3,达到100万IOPS,平均时延0.5ms,P99时延1ms。硬件配置:网络…

菜鸟的刷题之路之二叉树

💕“成功不是终点,失败不是终结,勇气才是启程的第一步。”💕 🐼作者:不能再留遗憾了🐼 🎆专栏:菜鸟的刷题之路🎆 🚗本文章主要内容:将…

GORM---创建

目录 模型定义使用Create创建记录一次性创建多条数据批量插入数据时开启事务默认值问题 模型定义 定义一个PersonInfo结构体。 type PersonInfo struct {Id uint64 gorm:"column:id;primary_key;NOT NULL" json:"id"UserName string gorm:"co…

路径规划算法:基于狮群优化的路径规划算法- 附代码

路径规划算法:基于狮群优化的路径规划算法- 附代码 文章目录 路径规划算法:基于狮群优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要:本文主要介绍利用智能优化算法狮群…

Prometheus+Grafana(外)监控Kubernetes(K8s)集群(基于containerd)

一、实验环境 1、k8s环境 版本v1.26.5 二进制安装Kubernetes(K8s)集群(基于containerd)—从零安装教程(带证书) 主机名IP系统版本安装服务master0110.10.10.21rhel7.5nginx、etcd、api-server、scheduler、controller-manager、kubelet、proxymaster021…

在 Ubuntu 20.04 上安装 Nginx

保证以 sudo 用户身份登录,并且你不能运行 Apache 或者 其他处理进程在80端口和443端口。 安装 Nginx Nginx 在默认的 Ubuntu 源仓库中可用。想要安装它,运行下面的命令: sudo apt update sudo apt install nginx 一旦安装完成&#xff0…