Pinia 和 Vuex 的对比,storeToRefs 的原理
目录
- 1,Pinia 介绍
- 2,和 Vuex 的对比
- 3,storeToRefs 源码分析
1,Pinia 介绍
官网简介
Pinia 使用上的问题,官方文档很详细,这里不做赘述。
- Pinia 是 Vue 的专属状态管理库,支持vue2和vue3,不能应用于其他前端框架。
- Pinia 是 Vue 官方团队的成员实现的,原本是为了探索 vue5.x 的可能性,后来发现已经实现了 vue5.x 的提案。所以就作为最新版本的 Vuex ,也就是下一代状态管理库来使用了。
2,和 Vuex 的对比
- 删除了
mutations,只保留了state,getters,actions。异步修改 state 现在可以放到actions中了。 - 不再有模块嵌套,只有 store(状态仓库)的概念,store 之间独立又可相互调用。
- 支持插件扩展,比如为 store 新增属性或方法,操作 action 等。
- 因为 Pinia 使用 TS 开发的,所以对 TS 有很好的支持。
- 兼容 vue2 和 vue3,同时支持选项式风格和组合式风格。
- 轻量,压缩后体积只有 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 的原理:
- 首先通过
store = toRaw(store);将 store 转为普通对象,目的是方便遍历。 - 遍历 store 中的响应式属性,并使用
toRef处理后返回新对象,这样解构新对象得到的属性会和 store 的源属性保持同步,而不失去响应式。
为什么不用 toRefs 一步到位:
return toRefs(store)
因为 toRefs 会将 store 中每个属性都变为响应式返回,而我们只需要 store 中原本就是响应式的数据,并且不需要 actions。
以上。
相关文章:
Pinia 和 Vuex 的对比,storeToRefs 的原理
目录 1,Pinia 介绍2,和 Vuex 的对比3,storeToRefs 源码分析 1,Pinia 介绍 官网简介 Pinia 使用上的问题,官方文档很详细,这里不做赘述。 Pinia 是 Vue 的专属状态管理库,支持vue2和vue3&#x…...
Mycat分库分表的操作(配置)
Mycat是一个开源的分布式数据库中间件,它可以对数据库进行分库分表的操作,以下是Mycat分库分表的操作步骤: 配置数据源:将要操作的数据库和表通过Mycat的配置文件配置到数据源中。配置分片规则:根据分库分表的需求&am…...
android的canvas的clipRegion废弃替代代码
由于clipRegion的一些问题,导致他被废弃了,但又有时候会用到,所以写了一个工具类来替代它 代码如下 package com.example;import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.g…...
KubeSphere 社区双周报 | Fluent Operator 2.6.0 发布 | 2023.11.10-11.23
KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书、新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列社区动态。 本次双周报涵盖时间为:2023.11.10-2023.…...
【通俗易懂】git原理、安装及连接gitlab,github
目录 一、GIT原理【这部分也挺简单,可以看看,如果没时间可以直接跳到第二部分】 SVN与Git的的区别 二、安装Git 2.1 获取Git安装程序 2.2 Git安装过程 三、Git连接Gitlab 3.1 gitlab准备工作 3.2 本地计算机准备工作及配置git 四、Git连接Github…...
TCP /UDP协议的 socket 调用的过程
在传输层有两个主流的协议 TCP 和 UDP,socket 程序设计也是主要操作这两个协议。这两个协议的区别是什么呢?通常的答案是下面这样的。 TCP 是面向连接的,UDP 是面向无连接的。TCP 提供可靠交付,无差错、不丢失、不重复、并且按序…...
外贸独立站外部优化:提升网站可见度与吸引力的策略
随着全球电子商务的快速发展,外贸独立站已经成为众多企业拓展海外市场、提升品牌影响力的关键工具。然而,要想在竞争激烈的外贸市场中脱颖而出,除了产品优质、服务周到外,还需要做好网站的外部优化工作。本文将详细探讨如何通过有…...
buildAdmin 后端控制器的代码分析
buildAdmin的代码生成,很像是 fastadmin 的生成模式,当我们利用数据库生成了一个控制器的时候,我们可以看到, 它的生成代码很简洁 <?phpnamespace app\admin\controller\askanswer;use app\common\controller\Backend;/*** 回…...
Python丨让简历脱颖而出的关键,居然是“它”!
进入疫情后时代,各行各业都在力争新的发展!财会行业亦是如此,浏览各大招聘网站,不难发现财会相关岗位的招聘要求越来越“卷”,那求职者如何才能让自己获得面试邀请呢? 答案就是:一份亮眼且具有…...
CMake中常见的预定义变量
文章目录 CMake常见的预定义变量CMake variables官方文档 CMake常见的预定义变量 在 CMake 中,有一些常见的预定义变量,它们提供了有关项目、目录结构和构建环境的信息。这些变量可用于设置路径、传递参数、以及进行其他与构建过程相关的操作。 以下是…...
.netcore 获取appsettings
我的开发环境是abpvnext net6.0 。 因为业务需要,从原来老项目net4.5工程里复制了一个报表导出的业务类到net6项目里面,但是他的获取appsettings的代码其实不用想都知道会报错。因为原来framwork时代获取appsettings的方法常见的是 System.Configura…...
额温枪方案,MS8551,MS8601;MS1112,MS1100
鉴于测温的传感器信号非常微弱,需要用高精度、低噪声的运算放大器和高精度、低功耗的ADC。 运算放大器可供选择:MS8551 or MS8601,具有低失调(1uV)、低噪(22nV√Hz )、封装小等优点,…...
数字图像处理基础-用通俗语言进行超详细的总结
目录 图像感知与获取 韦伯定理 马赫带效应 图像获取 图像的采样和量化 图像内插(重采样) 图像的表示与描述 像素间的关系 exercise:4-邻域连通区域标记 本文章讲解数字图像处理的基础,大部分内容来源于课堂笔记中 图像感…...
3.3.1详解linux内核链表list_head及其接口应用
文章目录 1 list定义2 list接口2.1 list初始化方法1:定义并初始化链表方法2:先定义再初始化链表2.2 list_add2.3 list_del2.4 list_replace2.5 list_move2.6 list_splice3 list遍历3.1 list_entry3.2 list_first_entry3.3 list_last_entry3.4 list_first_entry_or_null3.5 li…...
发挥云计算潜力:Amazon Lightsail 与 Amazon EC2 的综述
文章作者:Libai 欢迎来到云计算世界,这里有无数的机会和无限的应用程序增长。 在当今的数字时代,企业可能会发现管理基础架构和扩展应用程序具有挑战性。 传统的本地解决方案需要大量的硬件、软件和维护前期投资。 要满足不断增长的需求&…...
【深度学习】卷积神经网络(CNN)
一、引子————边界检测 我们来看一个最简单的例子:“边界检测(edge detection)”,假设我们有这样的一张图片,大小88: 图片中的数字代表该位置的像素值,我们知道,像素值越大&#…...
科普:多领域分布式协同仿真
分布式协同仿真是一种在分布式计算环境中进行协同工作的仿真方法。使用该方法进行协同仿真时,仿真任务将被分发到多个计算节点上,并且这些节点可以同时工作以模拟完整的系统行为。分布式协同仿真已被广泛应用于工程、科学和军事领域,以便更好…...
openstack(2)
目录 块存储服务 安装并配置控制节点 安装并配置一个存储节点 验证操作 封装镜像 上传镜像 块存储服务 安装并配置控制节点 创建数据库 [rootcontroller ~]# mysql -u root -pshg12345 MariaDB [(none)]> CREATE DATABASE cinder; MariaDB [(none)]> GRANT ALL PR…...
Jmeter 压测保姆级入门教程
1、Jmeter本地安装 1.1、下载安装 软件下载地址: https://mirrors.tuna.tsinghua.edu.cn/apache/jmeter/binaries/ 选择一个压缩包下载即可 然后解压缩后进入bin目录直接执行命令jmeter即可启动 1.2 修改语言 默认是英文的,修改中文,点击…...
springboot2.1升级到2.7 actuator丢失部分metrics端点
项目场景: 项目需要升级springboot从2.1升级至2.7 问题描述 发现之前的metrics后面的jvm相关的端口丢了 原因分析: 找到这样一篇博文https://blog.csdn.net/CL_YD/article/details/120309094,这篇博文意思是对的,但是写的不太好…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
C# SqlSugar:依赖注入与仓储模式实践
C# SqlSugar:依赖注入与仓储模式实践 在 C# 的应用开发中,数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护,许多开发者会选择成熟的 ORM(对象关系映射)框架,SqlSugar 就是其中备受…...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
JVM虚拟机:内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...
nnUNet V2修改网络——暴力替换网络为UNet++
更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...
