Pinia的使用

Pinia官网

💡 直观
store 就像组件一样熟悉。API 旨在让您编写组织良好的 store 。

🔑 类型安全
类型是推断出来的,这意味着即使在 JavaScript 中 store 也可以为您提供自动完成功能!

⚙️ 开发工具支持
Pinia 与 Vue devtools 挂钩,为您提供增强的 Vue 2 和 Vue 3 开发体验。

🔌 可扩展
响应存储更改以通过事务、本地存储同步等扩展 Pinia。

🏗 模块化设计
构建多个 Store 并让您的捆绑程序代码自动拆分它们。

📦 极轻
Pinia 约 1kb,您甚至会忘记它的存在!

Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起,最初的原则仍然相同,但 Pinia 对 Vue 2 和 Vue 3 都有效,并且不需要您使用组合 API。 除了安装和 SSR 之外,两者的 API 都是相同的,并且这些文档针对 Vue 3,并在必要时提供有关 Vue 2 的注释,以便 Vue 2 和 Vue 3 用户可以阅读!

Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 如果您熟悉 Composition API,您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处:

  1. dev-tools 支持
  2. 跟踪动作、突变的时间线
  3. Store 出现在使用它们的组件中
  4. time travel 和 更容易的调试
  5. 热模块更换
  6. 在不重新加载页面的情况下修改您的 Store
  7. 在开发时保持任何现有状态
  8. 插件:使用插件扩展 Pinia 功能
  9. 为 JS 用户提供适当的 TypeScript 支持或 autocompletion
  10. 服务器端渲染支持
// 定义
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},actions: {increment() {this.count++},},
})
// 使用:
import { useCounterStore } from '@/stores/counter'
export default {setup() {const counter = useCounterStore()counter.count++counter.$patch({ count: counter.count + 1 })counter.increment()},
}
// 高级写法:
export const useCounterStore = defineStore('counter', () => {const count = ref(0)function increment() {count.value++}return { count, increment }
})
// mapStores()、mapState() 或 mapActions()
const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),getters: {double: (state) => state.count * 2,},actions: {increment() {this.count++},randomizeCounter() {this.counter = Math.round(100 * Math.random())},async fetchUserPreferences(preferences) {const auth = useAuthStore()if (auth.isAuthenticated) {this.preferences = await fetchPreferences()} else {throw new Error('User must be authenticated')}},}
})
const useUserStore = defineStore('user', {})
export default {computed: {...mapStores(useCounterStore, useUserStore)...mapState(useCounterStore, ['count', 'double']),},methods: {...mapActions(useCounterStore, ['increment']),},
}

Pinia(发音为 /piːnjʌ/,类似于英语中的“peenya”)是最接近有效包名 piña(西班牙语中的_pineapple_)的词。 菠萝实际上是一组单独的花朵,它们结合在一起形成多个水果。 与 Store 类似,每一家都是独立诞生的,但最终都是相互联系的。

Pinia API 与 Vuex ≤4 有很大不同,即:

mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成,但这不再是问题。

  1. 无需创建自定义复杂包装器来支持 TypeScript,所有内容都是类型化的,并且 API 的设计方式尽可能利用 TS 类型推断。
  2. 不再需要注入、导入函数、调用函数、享受自动完成功能!
  3. 无需动态添加 Store,默认情况下它们都是动态的,您甚至都不会注意到。请注意,您仍然可以随时手动使用 Store 进行注册,但因为它是自动的,您无需担心。
  4. 不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store,但 Pinia 通过设计提供平面结构,同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。
  5. 没有 命名空间模块。鉴于 Store 的扁平架构,“命名空间” Store 是其定义方式所固有的,您可以说所有 Store 都是命名空间的。

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

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

相关文章

六.Linux远程登录

1.说明:公司开发的时候,具体的应用场景是这样的 1.linux服务器是开发小组共享 2.正式上线的项目是运行在公网 3.因此程序员需要远程登录到Linux进行项目管理或者开发 4.画出简单的网络拓扑示意图(帮助理解) 5.远程登录客户端有Xshell6、Xftp6&#xff0…

7年经验之谈 —— 如何高效的开展app的性能测试?

APP性能测试是什么 从网上查了一下,貌似也没什么特别的定义,我这边根据自己的经验给出一个自己的定义,如有巧合纯属雷同。 客户端性能测试就是,从业务和用户的角度出发,设计合理且有效的性能测试场景,制定…

3D建模基础教程:石墨工具介绍

3DMAX的石墨(Graphite)工具是一个强大的建模工具,可以用来创建和编辑复杂的3D模型。下面是对石墨工具的详细介绍: 石墨工具的界面布局: 石墨工具的界面与3DMAX的主界面相同,包括菜单栏、工具栏、视图区、…

二十三种设计模式全面解析-解锁外观模式的神秘面纱:深入探讨外观模式的魔力

在软件设计的世界中,有一种设计模式以其简洁而强大的特性闪耀着光芒,它就是——外观模式(Facade Pattern)。这个模式隐藏在代码的背后,默默地协调着各个子系统,为我们创造了一种优雅的编程体验。本文将带你…

Mysql字符串类型编码问题

Q: 数据库 Redis 出现 字符比较不一致问题 A:调查后发现在数据库中使用的 account 编码为 utf8mb4_unicode_ci,而这种其实是不区分大小写的,后面我们根据情况,将编码换为 utf8mb4_bin就可以了 参考: utf8mb4_Sageice的博客-CSDN博客 MySQ…

【LeetCode】二叉树OJ

目录 一、根据二叉树创建字符串 二、二叉树的层序遍历 三、二叉树的层序遍历 II 四、二叉树的最近公共祖先 五、二叉搜索树与双向链表 六、从前序与中序遍历序列构造二叉树 七、从中序与后序遍历序列构造二叉树 一、根据二叉树创建字符串 606. 根据二叉树创建字符串 - …

redis运维(八)数据类型(一)字符串

一 字符串 说明: 不需要精通,但是得有一个粗略的认识,然后利用help command查看具体使用仅做记录查询 ① 基础概念 说明: ex是用来收敛内存使用率备注: 早期set是不带ex的默认: 不设置ex,是常驻内存 key和value的命名规范 …

Java-类和类的关系

代码 总结: 【1】面向对象的思维:找参与者,找女孩类,找男孩类 【2】体会了什么叫方法的形参,什么叫方法的实参: 具体传入的内容 实参: 【3】类和类可以产生关系: (1…

基于非洲秃鹫算法优化概率神经网络PNN的分类预测 - 附代码

基于非洲秃鹫算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于非洲秃鹫算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于非洲秃鹫优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要:针对PNN神…

powershell环境变量

示例 添加临时环境变量 $Env:Path";D:\Apps\nodejs"参考 microsoft about_Environment_Variables

电容的耐压值是什么意思呢?

电容是什么? 电容是一种能以电荷的形式储存能量的装置。与同样大小的电池相比,电容能储存的能量要小得多,大约1w个电容存储的能量才顶一节电池存储的能量,但对于许多电路设计来说却足够使用了。 看下图的直插式电容,…

K8S配置资源管理

这里写目录标题 K8S配置资源管理一.Secret1.介绍2.Secret 有四种类型3.创建 Secret4.使用方式 二.ConfigMap1.介绍2.创建 ConfigMap3.Pod 中使用 ConfigMap4.用 ConfigMap 设置命令行参数5.通过数据卷插件使用ConfigMap6.ConfigMap 的热更新7.ConfigMap 更新后滚动更新 Pod K8S…

中级程序员——uniapp和小程序面试题

😄博主:小猫娃来啦 😄文章核心:uniapp和小程序面试题 文章目录 用uniapp有遇到一些兼容性问题吗?uniapp最大的优点是什么?uniapp如何实现多端兼容?uniapp是如何做跨端适配的?常用的u…

信息中心网络提出的背景、研究现状及研究内容

信息中心网络什么时候提出的?未来发展前景?有什么著名实验室在做? 1、提出背景: 互联网产生于上世纪60年代: (1)网络设备数量呈指数性增长 截至2022年底全球范围内预计将有超过280亿台终端设…

简单工厂、工厂方法和抽象工厂模式(创建型设计模式)的 C++ 代码示例模板

文章目录 前言代码仓库简单工厂模式(Simple Factory)工厂方法模式(Factory Method)抽象工厂模式(Abstract Factory)总结参考资料作者的话 前言 简单工厂、工厂方法和抽象工厂模式(创建型设计模…

如理解WPF绑定中的UpdateSourceTrigger

在WPF中,UpdateSourceTrigger是一个枚举,用于确定绑定源(比如视图模型中的属性)的更新时机。这对于数据绑定特别重要,因为它控制着用户界面上的更改何时反映到绑定的数据源属性上。下面是UpdateSourceTrigger的几个值&…

Linux:系统基本信息扫描(2)

#网络地址:ip a------------------------------------------------------------- ip a echo "主机名:-------------------------------------------------------" hostnamectl sleep 0.5s echo "#系统基本信息:--------------------------------------------…

YOLO目标检测——无人机航拍输电线路绝缘瓷瓶数据集下载分享【对应voc、coco和yolo三种格式标签】

实际项目应用:电力系统运维、状态监测与故障诊断、智能电网建设等领域数据集说明:无人机航拍输电线路绝缘瓷瓶数据集,真实场景的高质量图片数据,数据场景丰富标签说明:使用lableimg标注软件标注,标注框质量…

用欧拉路径判断图同构推出reverse合法性:1116T4

http://cplusoj.com/d/senior/p/SS231116D 假设我们要把 a a a 变成 b b b,我们在 a i a_i ai​ 和 a i 1 a_{i1} ai1​ 之间连边, b b b 同理,则 a a a 能变成 b b b 的充要条件是两图 A , B A,B A,B 同构。 必要性显然&#xff0…

【心得】基于flask的SSTI个人笔记

目录 计算PIN码 例题1 SSTI的引用链 例题2 SSTI利用条件: 渲染字符串可控,也就说模板的内容可控 我们通过模板 语法 {{ xxx }}相当于变相的执行了服务器上的python代码 利用render_template_string函数参数可控,或者部分可控 render_…