pinia学习笔记
文章平均质量分 80
pinia学习笔记。
gxw_viva
有问题可以加我微信,微信号: Hex-VivaLaVida。
展开
-
Pinia 在组件外使用 store。
Pinia store 依靠pinia实例在所有调用中共享同一个 store 实例。大多数时候,只需调用你定义的useStore()函数,完全开箱即用。例如,在setup()中,你不需要再做任何事情。但在组件之外,情况就有点不同了。实际上,useStore()给你的app自动注入了pinia实例。这意味着,如果pinia实例不能自动注入,你必须手动提供给useStore()函数。你可以根据不同的应用,以不同的方式解决这个问题。原创 2024-03-05 13:47:03 · 388 阅读 · 0 评论 -
Pinia插件的使用(简易版数据持久化插件)
最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。Pinia 插件是一个函数,可以选择性地返回要添加到 store 的属性。如果你想给 store 添加新的 state 属性或者在服务端渲染的激活过程中使用的属性,在定义 store 时,可以创建新的选项,以便在插件中使用它们。的情况下你依旧可以访问所有计算属性的原因,也是它们为什么是响应式的原因。当添加外部属性、第三方库的类实例或非响应式的简单值时,你应该先用。需要注意的是,在一个插件中, state 变更或添加(包括调用。原创 2024-03-05 10:46:40 · 982 阅读 · 0 评论 -
Pinia 和 Vuex 的区别。
Pinia是一个轻量级的状态管理库,专注于提供简单的API来管理应用程序的状态,它基于Vue 3的构建,提供了更加灵活和可组合的状态管理方式,支持多个store实例。Vuex是一种状态管理模式和库,构建为集中式存储,可帮助你维护 Vue 应用程序中存在的所有组件的状态。Vuex 遵循确保你的状态突变为预测标准的规则。使 Vuex 更强大的一个因素是组件从 Vuex store 中获取它们的状态,并且可以快速有效地响应 store 状态的变化。原创 2024-03-04 16:24:45 · 666 阅读 · 0 评论 -
Pinia Action的使用。
Action 相当于组件中的。它们可以通过中的actions属性来定义,类似,action 也可通过this访问,并支持。action,你可以在它们里面await调用任何 API,以及其他 action!你也完全可以自由地设置任何你想要的参数以及返回任何结果。当调用 action 时,一切类型也都是可以被自动推断出来的。原创 2024-03-04 16:06:12 · 557 阅读 · 0 评论 -
Pinia State的使用
在大多数情况下,state 都是你的 store 的核心。人们通常会先定义能代表他们 APP 的 state。在 Pinia 中,state 被定义为一个返回初始状态的函数。这使得 Pinia 可以同时支持服务端和客户端。原创 2024-03-04 15:19:07 · 856 阅读 · 0 评论 -
Pinia Getter的使用。
这是为了避免 TypeScript 的已知缺陷,原创 2024-03-04 16:00:27 · 661 阅读 · 0 评论 -
Pinia 快速入门
Pinia起始于 2019 年 11 月左右的一次实验,其目的是设计一个拥有组合式 API的 Vue 状态管理库。我们得知道 Store 是用定义的,它的第一个参数要求是一个独一无二的名字:// 你可以对 `defineStore()` 的返回值进行任意命名,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`,`useCartStore`,`useProductStore`)// 第一个参数是你的应用中 Store 的唯一 ID。原创 2024-03-04 14:12:51 · 530 阅读 · 0 评论