简单介绍一下hooks和pinia

最新推荐文章于 2024-06-17 10:06:42 发布
最新推荐文章于 2024-06-17 10:06:42 发布
阅读量1.7k 收藏 3
点赞数
文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45662523/article/details/126514681
版权
本文探讨了React Hooks如何解决组件间复杂复用问题，特别是闭包陷阱，并对比了Vue2的mixins。同时，介绍了Vue3的setup语法糖，它仅调用一次，为组合式API提供了灵感。此外，文章还提到了新一代的Pinia状态管理工具，它通过state、getters和actions简化了Vuex的使用，使得状态管理更加简洁高效。
摘要由CSDN通过智能技术生成

hooks是react的一个新特性，他是为了解决将复杂的跨组件复用的问题

在Vue2中有一个混入mixins，它的优点是将可重复用的变量或逻辑封装在一个组件中，在需要用的时候，将他引入进来，但是他最大的缺点就是当你使用可重用的变量或者逻辑时，你不知道是那个组件里的，hooks就是为了解决变量或者逻辑属于那个组件的问题

hooks一般使用use开头，但是hooks有一个致命的缺点，就是著名的闭包陷阱，而且每次渲染都要重新调用hooks函数，但是在Vue3中提供了setup语法糖，setup仅仅被调用一次，hooks也是组合式api的灵感来源。

自定义hooks类似这样

 

pinia是官方推出的新一代全局状态管理工具，官方也在极力推崇他。

三个模块，state，getters，actions，极大简化了vuex。

首先导入definestore，state定义变量，getters类似于计算属性，actions定义方法，可以同步也可以是异步，使用的话，定义一个变量store'=dialogstore() 使用store调用变量和方法 

一沓纸稿
关注
Pinia 上手指南 -- 新一代状态管理工具，它会成为 Vuex 的良好替代品吗？
m0_67390773的博客
03-03 1077
目录 一、简介 二、入门 1、安装 2、何为 Store ？ 3、何时使用 Store ？ 三、基本使用 1、Store 2、State? 定义 state 获取 state 重置 state 更换 state 修改 state 订阅（监听）state? 3、Getters 创建 getters 使用其他 getters 访问其他 store 中的 getters 4、Actions 创建 actions 异步 actions 访问其他 store 中的 actions 订阅 actions 四、与 Vue
Pinia 快速入门
Cool的博客
01-24 981
Pinia 是什么? Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案 Pinia 支持 Vue2 和 Vue3 本文只讲 Pinia 在 Vue3 中的使用, 在 Vue2 中使用略有差异，参考 官方文档 Pinia 优势 符合直觉，易于学习 极轻， 仅有 1 KB 模块化设计，便于拆分状态 安装 Pinia 安装需要 @next 因为 Pinia 2 处于 beta 阶段, Pinia 2 是对应 Vue3 的版本 # 使用 npm npm install
基于vue3+vite+typescript+pinia后台管理系统模版源码+详细说明.zip
05-05
采用 vue3 全家桶（vite+pinia+element-plus+vue-router@4）功能介绍 使用 Vue3.2.45 + TypeScript 开发 采用 Vite4.0 作为项目开发、打包工具（配置 Gzip 打包、TSX 语法、跨域代理……） 使用 Prettier 统一格式化代码，集成 Eslint、Stylelint 代码校验规范 使用 husky、lint-staged、commitlint、commitizen、cz-git 规范提交信息 使用 Pinia 替代 Vuex，轻量、简单、易用， 集成 Pinia 持久化插件 使用 TypeScript 对 Axios 整个二次封装 基于 Element-plus 二次封装 ProTable 组件，基于配置化去开发常用的表格。 支持页面全屏展示 支持菜单权限的配置和管理 支持三种方式（指令，hooks，组件）的按钮级别的权限控制 支持暗黑模式的切换 支持自定义主题切换 支持 i18n 国际化 自定义指令开发
Pinia使用笔记
m0_71231013的博客
09-28 2282
defineStore函数用来定义一个状态，返回一个使用状态的函数。我们把状态定义在在/src/store/index.ts文件内，当然也可以定义在其他文件内，并且defineStore可以定义多个状态集合​// useStore 可以是 useUser、useCart 之类的任何东西// state：定义状态count: 0}),// getters：与vuex一致，类似于computer},// actions：与vuex一致，用于修改状态}}})复制代码。
vue2升级vue3：vue3真的需要vuex或者Pinia吗？hooks全有了
周陆军的博客，分享it技术。
01-25 1703
同样的，如果child组件也有自己的子组件，调用inject同样有效。》，建议新项目使用 Pinia，但是我的项目部分组件希望直接打包出去给地方使用。vue-composition 提供了类似 React Hook 的能力，将 Vue 的抽象层级从「组件级（Component）」降低为「函数级（Function）」。有了provide/inject和ref/reactive配合，父子组件/兄弟组件共享状态的问题已经迎刃而解。这个使用肯定是还太粗糙，项目中使用的代码，等有空的 脱密了在分享一下。
Vue3——Pinia（重要）
Tommy__li的博客
02-01 614
少了mutation和modules，很正常，因为完全用不到了，所以就没了，pinia真的比vuex方便多了，少写很多东西，逻辑上也更加简单。
pinia使用
weixin_39755186的博客
04-04 375
/ 通过事件，直接修改test里面的之。
【vue3】一些关于hooks的使用经验
Minf的博客
09-08 612
最近接到了一个需求，隔壁嵌入式部门希望我们用前端解析渲染Kconfig表单。这篇文章用来记录一下本次使用的经验。
vue3中用pinia写hooks
最新发布
10-26
在Vue 3中，使用Pinia作为状态管理库时，如果你想创建类似于React Hooks的功能，可以利用Pinia提供的`store`对象来封装一些数据获取、修改以及订阅的变化。Pinia的Store API允许我们轻松地处理组件间的通信和状态...
vuex 和 pinia
05-18
Vuex和Pinia都是Vue.js的状态管理库，可以帮助开发者更好地管理Vue.js应用程序中的数据流。Vuex是官方提供的状态管理库，而Pinia是Vue.js生态...而使用Pinia，则更加简单，只需要定义一个store，并在组件中使用它即可。
基于vue3+vite+typescript+pinia后台管理系统模版源码+文档说明
09-25
基于vue3+vite+typescript+pinia后台管理系统模版源码+文档说明，采用 vue3 全家桶（vite+pinia+element-plus+vue-router@4）功能介绍 使用 Vue3.2.45 + TypeScript 开发 采用 Vite4.0 作为项目开发、打包工具（配置...
【笔记】pinia的简单应用
咫尺天涯的专栏
08-17 293
pinia的简单应用
Pinia的入门笔记
HaushoLin的博客
12-26 1073
pinia学习笔记
vue3的pinia基本用法
wytccc的博客
02-07 588
【代码】vue3的pinia基本用法。
Pinia的使用方法及持久化存储
m0_64373473的博客
11-08 386
Pinia是什么？与vuex有什么区别？怎么使用以及如何做持久化存储
vue3 封装使用 pinia （可直接使用，包含数据持久化）
^_^
11-12 4131
Pinia是 Vue 的存储库，它允许您跨组件/页面共享状态，与vuex功能一样。为什么不在用vuex了呢?Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API
状态管理容器Pinia
smz的博客
09-25 202
本文主要记录Vue3状态管理工具Pinia的介绍与使用，Pinia相对于VueX来说，简化了API的使用，支持TS，让学习成本大大降低。
VUE3常见面试题
weixin_40381947的博客
06-08 4364
在上面的例子中，我们定义了一个名为useCountdown的自定义hook函数，该函数接收一个表示倒计时的秒数，通过ref函数创建了一个名为count的响应式数据，并在函数内部使用了Vue3的组合式API onMounted和setInterval来实现倒计时的逻辑封装。toRefs 的作用是将一个普通的对象转换成多个 ref 对象，每个 ref 对象对应原对象的一个属性，使得可以在模板中使用这些 ref 对象来渲染和响应式更新。Proxy代理是ES6的新特性，可以代理一个对象并跟踪该对象的变化。
vue3中如何使用pinia -- pinia使用教程（一）
JackZhouMine
06-17 1162
pinia 是一个 Vue3 的状态管理库，它的 API 设计和 Vuex 有很大的相似之处，但是它的实现方式和 Vuex 完全不同，它是基于 Vue3 的新特性。这种方案，也不好，要是组件挂载多次，就会创建多个 store，这个 store 也不会被销毁，但是可以手动销毁的 API。上面的 useCounter 使用选项式 api 创建，pinia 也支持组合式 api, 这和 vue3 的组合式函数非常贴近，使用上更加简单。使用一个工厂函数，组件每次挂载，都会执行工厂函数，返回一个新的 store。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值