Pinia 和 Vuex 的对比,storeToRefs 的原理

目录

  • 1,Pinia 介绍
  • 2,和 Vuex 的对比
  • 3,storeToRefs 源码分析

1,Pinia 介绍

官网简介

Pinia 使用上的问题,官方文档很详细,这里不做赘述。

  1. Pinia 是 Vue 的专属状态管理库,支持vue2和vue3,不能应用于其他前端框架。
  2. Pinia 是 Vue 官方团队的成员实现的,原本是为了探索 vue5.x 的可能性,后来发现已经实现了 vue5.x 的提案。所以就作为最新版本的 Vuex ,也就是下一代状态管理库来使用了。

2,和 Vuex 的对比

  1. 删除了 mutations ,只保留了 stategettersactions异步修改 state 现在可以放到 actions 中了。
  2. 不再有模块嵌套,只有 store(状态仓库)的概念,store 之间独立又可相互调用。
  3. 支持插件扩展,比如为 store 新增属性或方法,操作 action 等。
  4. 因为 Pinia 使用 TS 开发的,所以对 TS 有很好的支持。
  5. 兼容 vue2 和 vue3,同时支持选项式风格和组合式风格。
  6. 轻量,压缩后体积只有 1kb 左右。

在使用上,同样应避免直接操作 store,尽量都集中使用 actions 中的方法来操作 store 的状态。

3,storeToRefs 源码分析

在组件中使用 store 的属性时,会有一个问题:

<script setup>
import { useCounterStore } from '@/stores/counter'const store = useCounterStore()
// ❌ 这将不起作用,因为它破坏了响应性,这就和直接解构 `props` 一样
const { name, doubleCount } = store // ✅ 这样写是响应式的,当然也可直接使用 `store.doubleCount`
const doubleValue = computed(() => store.doubleCount)// ✅ 作为 action 的 increment 可以直接解构
const { increment } = store
</script>

这时需要使用 storeToRefs(),它将为每一个响应式属性创建引用。

<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'const store = useCounterStore()
const { name, doubleCount } = storeToRefs(store)
</script>

源码

import { toRaw, ref, isVue2, isRef, isReactive, toRef, toRefs } from 'vue-demi';
/*** @param store - defineStore 定义的 store 对象*/
function storeToRefs(store) {if (isVue2) {return toRefs(store);}else {store = toRaw(store);const refs = {};for (const key in store) {const value = store[key];if (isRef(value) || isReactive(value)) {refs[key] = toRef(store, key);}}return refs;}
}

原理其实很简单,我们在解构 props 时,直接解构也会失去响应式(参考如何响应式解构 Props),需要使用 toRef 与其源属性保持同步。

所以 storeToRefs 的原理:

  1. 首先通过 store = toRaw(store); 将 store 转为普通对象,目的是方便遍历。
  2. 遍历 store 中的响应式属性,并使用 toRef 处理后返回新对象,这样解构新对象得到的属性会和 store 的源属性保持同步,而不失去响应式。

为什么不用 toRefs 一步到位:

return toRefs(store)

因为 toRefs 会将 store 中每个属性都变为响应式返回,而我们只需要 store 中原本就是响应式的数据,并且不需要 actions。


以上。

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

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

相关文章

c++day1

提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 要求使用C风格字符串完成 #include <iostream>using namespace std;int main() {string str;cout << "请输入一个含有大小写字母&#xff0c;空格&am…

C语言面试之旅:掌握基础,探索深度(面试实战之c语言关键词中篇)

劝人的话就像清晨的闹钟&#xff0c;只对别人有用&#xff0c;却永远叫不醒自己。 ----小新 一.预处理指令 &#xff08;1&#xff09;#define & typedef #define是C语言中定义的语法&#xff0c;是预处理指令&#xff0c;在预处理时进行简单而机械的字符串替换&…

java学习part19接口

113-面向对象(高级)-接口的使用_哔哩哔哩_bilibili 1.接口概念 个人认为是一种能力&#xff0c;某个类是否具有某种能力。一个类实现了一个接口就相当于学会了某些功能。 2.使用 接口里的属性都是全局常量public static final&#xff0c;即便不写也会自动加上。 3.多实现 4.接…

Day41 使用listwidget制作简易图片播放器

1.简介 使用QlistWidget实现简易图片播放器&#xff0c;可以打开一个图片序列&#xff0c;通过item的单击事件实现图片的切换&#xff0c;通过设置list的各种属性实现图片预览的显示&#xff0c;美化滚动条即可实现一个简易图片播放器。 2.效果 3.实现步骤&#xff1a; 1.初始…

【沐风老师】3DMAX拼图建模工具MaxPuzzle2D插件使用方法详解

MaxPuzzle2D拼图建模工具使用帮助 MaxPuzzle2D拼图建模工具&#xff0c;拼图建模“彩虹系列”插件&#xff0c;是一款用MAXScript脚本语言开发的3dMax拼图建模小工具&#xff0c;可以创建2D或3D的拼图图形阵列。这让需要拼图建模的设计师大大节省了时间。 MaxPuzzle2D工具界面&…

REST-Assured--JAVA REST服务自动化测试的Swiss Army Knife

什么是REST-Assured REST Assured是一套基于 Java 语言实现的开源 REST API 测试框架 Testing and validation of REST services in Java is harder than in dynamic languages such as Ruby and Groovy. REST Assured brings the simplicity of using these languages into t…

解决ssh使用public key远程登录服务器拒绝问题

目录 使用场景windows安装ssh客户端使用powershell ssh登录服务器生成密钥文件ubuntu ssh服务器配置使用vscode远程登录使用Xshell远程登录使用MobaXtem远程登录Server refused our key问题解决方案 使用场景 使用vscode远程ssh登录使用public key不需要输入密码,比较方便. w…

《Effective C++》条款24

若所有参数皆需类型转换&#xff0c;请为此采用non-member函数 如果想实现这样的一种运算符重载&#xff1a; class A { public:A(int x) :_x(x) {};const A operator*(const A& a){A ret(0);ret._x a._x * a._x;return ret;} private:int _x; }; A a(1); A b(2); A ret…

JSP forEach标签varStatus使用讲解(了解即可 基本用不到)

上文 JSP迭代标签之 forEach循环标签 基本使用讲解 我们讲了一下forEach标签 大多数时候会用的语法 但是varStatus 没有讲到 因为我觉得这个东西 做个了解就好了 如果你不感兴趣都可以不看 因为感觉开发中基本是用不到的 但是 官方有提供 我还是说一下 当前遍历的基本信息 包括…

易点天下携AIGC创新成果KreadoAI亮相数贸会,解锁电商文化出海新可能

11月27日&#xff0c;第二届全球数字贸易博览会&#xff08;以下简称“数贸会”&#xff09;在浙江杭州完美落幕。作为出海营销领域最早一批布局AIGC战略的营销科技公司&#xff0c;易点天下受邀与来自全球800余家境内外数字贸易企业同台参展&#xff0c;并分享了旗下AIGC数字营…

物理世界中的等距3D对抗样本

论文题目&#xff1a;Isometric 3D Adversarial Examples in the Physical World 会议&#xff1a;NIPS 2022 点云&#xff1a; 点云——表达目标空间分布和目标表面特性的海量点集合&#xff0c;点包含xyz坐标信息 能够包含颜色等其他信息 使用顶点、边和面的数据表征的三维…

openwrt配置SSL证书实现https加密访问

前言&#xff1a;目前来看这个用处不是很大&#xff0c;因为只能访问一个端口&#xff0c;且因为80和443都已经被运营商封了&#xff0c;所以访问时还是得带端口。以下以阿里云证书为例&#xff1a; 一、申请证书 这个很简单&#xff0c;不想去截图了&#xff0c;直接去申请你…

带残差连接的ResNet18

目录 1 模型构建 1.1 残差单元 1.2 残差网络的整体结构 2 没有残差连接的ResNet18 2.1 模型训练 2.2 模型评价 3 带残差连接的ResNet18 3.1 模型训练 3.2 模型评价 4 与高层API实现版本的对比实验 总结 残差网络&#xff08;Residual Network&#xff0c;ResNet&#xff09;…

shiyan

import javax.xml.transform.Result; import java.util.Arrays; public class ParseText {//需要统计的字符串为private String text"Abstract-This paper presents an overview";private Result[] res;private int count;public ParseText(){resnew Result[100];cou…

4.4-Docker bridge0详解

在Docker世界中&#xff0c;两个container是通过bridge0连接起来的。 首先&#xff0c;介绍一个命令&#xff1a;docker network ls 这个docker network ls明令会列举出来当前这台机器上docker有哪些网络。 先看一下bridge。 现在有一个容器flask-hello-docker&#xff0c;它是…

矩阵的初等变换

1.矩阵的初等变换的分类&#xff1a; 1.按类型分&#xff1a;初等行变换&#xff08;动行&#xff09;&#xff0c;初等列变换&#xff08;动列&#xff09; 2.按方式分&#xff1a; 1.交换矩阵的两行或者两列 2.用一个不为0的数乘矩阵的某一行 3.用一个任意的数乘矩阵的某一行…

Unity打出的安卓包切换后台再恢复前台,卡顿许久问题记录

连接AndroidStudio发现当切换后台时提示&#xff1a;D/Unity: Multi-casting "[IP] 192.168.31.231 [Port] 55000 [Flags] 19 [Guid] 1268732307 [EditorId] 264356214 [Version] 1048832 [Id] AndroidPlayer(11,Xiaomi_M2012K11AC192.168.31.231) [Debug] 0 [PackageName…

业务流程基本元素分类

业务流程基本元素是指组成业务流程的最基本的、不可分割的部分&#xff0c;这些元素共同构成了一个完整的业务流程。这些元素可以分为以下几类&#xff1a; 流程步骤&#xff1a;业务流程中必须包含的具体步骤&#xff0c;例如收集数据、处理请求、审核、决策、执行、发布等。…

docker镜像分层、仓库、容器数据卷与常用软件安装

一、镜像分层 1、镜像概念&#xff1a; 镜像是一种轻量级、可执行的独立软件包&#xff0c;它包含运行某个软件所需的所有内容&#xff0c;将应用程序和配置依赖打包好行成一个可交付的运行环境&#xff0c;这个打包好的运行环境就是image镜像文件。 2、镜像分层&#xff1a…

文章解读与仿真程序复现思路——电力系统保护与控制EI\CSCD\北大核心《基于深度强化学习的城市配电网多级动态重构优化运行方法》

这个标题涉及到城市配电网&#xff08;Urban Power Distribution Network&#xff09;的优化运行方法&#xff0c;其中使用了深度强化学习&#xff08;Deep Reinforcement Learning&#xff09;技术&#xff0c;并且特别强调了多级动态重构。 解读每个关键部分&#xff1a; 基…