当前位置: 首页 > news >正文

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。


以上。

相关文章:

Pinia 和 Vuex 的对比,storeToRefs 的原理

目录 1&#xff0c;Pinia 介绍2&#xff0c;和 Vuex 的对比3&#xff0c;storeToRefs 源码分析 1&#xff0c;Pinia 介绍 官网简介 Pinia 使用上的问题&#xff0c;官方文档很详细&#xff0c;这里不做赘述。 Pinia 是 Vue 的专属状态管理库&#xff0c;支持vue2和vue3&#x…...

Mycat分库分表的操作(配置)

Mycat是一个开源的分布式数据库中间件&#xff0c;它可以对数据库进行分库分表的操作&#xff0c;以下是Mycat分库分表的操作步骤&#xff1a; 配置数据源&#xff1a;将要操作的数据库和表通过Mycat的配置文件配置到数据源中。配置分片规则&#xff1a;根据分库分表的需求&am…...

android的canvas的clipRegion废弃替代代码

由于clipRegion的一些问题&#xff0c;导致他被废弃了&#xff0c;但又有时候会用到&#xff0c;所以写了一个工具类来替代它 代码如下 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 的贡献者&#xff0c;并对近期重要的 PR 进行解析&#xff0c;同时还包含了线上/线下活动和布道推广等一系列社区动态。 本次双周报涵盖时间为&#xff1a;2023.11.10-2023.…...

【通俗易懂】git原理、安装及连接gitlab,github

目录 一、GIT原理【这部分也挺简单&#xff0c;可以看看&#xff0c;如果没时间可以直接跳到第二部分】 SVN与Git的的区别 二、安装Git 2.1 获取Git安装程序 2.2 Git安装过程 三、Git连接Gitlab 3.1 gitlab准备工作 3.2 本地计算机准备工作及配置git 四、Git连接Github…...

TCP /UDP协议的 socket 调用的过程

在传输层有两个主流的协议 TCP 和 UDP&#xff0c;socket 程序设计也是主要操作这两个协议。这两个协议的区别是什么呢&#xff1f;通常的答案是下面这样的。 TCP 是面向连接的&#xff0c;UDP 是面向无连接的。TCP 提供可靠交付&#xff0c;无差错、不丢失、不重复、并且按序…...

外贸独立站外部优化:提升网站可见度与吸引力的策略

随着全球电子商务的快速发展&#xff0c;外贸独立站已经成为众多企业拓展海外市场、提升品牌影响力的关键工具。然而&#xff0c;要想在竞争激烈的外贸市场中脱颖而出&#xff0c;除了产品优质、服务周到外&#xff0c;还需要做好网站的外部优化工作。本文将详细探讨如何通过有…...

buildAdmin 后端控制器的代码分析

buildAdmin的代码生成&#xff0c;很像是 fastadmin 的生成模式&#xff0c;当我们利用数据库生成了一个控制器的时候&#xff0c;我们可以看到&#xff0c; 它的生成代码很简洁 <?phpnamespace app\admin\controller\askanswer;use app\common\controller\Backend;/*** 回…...

Python丨让简历脱颖而出的关键,居然是“它”!

进入疫情后时代&#xff0c;各行各业都在力争新的发展&#xff01;财会行业亦是如此&#xff0c;浏览各大招聘网站&#xff0c;不难发现财会相关岗位的招聘要求越来越“卷”&#xff0c;那求职者如何才能让自己获得面试邀请呢&#xff1f; 答案就是&#xff1a;一份亮眼且具有…...

CMake中常见的预定义变量

文章目录 CMake常见的预定义变量CMake variables官方文档 CMake常见的预定义变量 在 CMake 中&#xff0c;有一些常见的预定义变量&#xff0c;它们提供了有关项目、目录结构和构建环境的信息。这些变量可用于设置路径、传递参数、以及进行其他与构建过程相关的操作。 以下是…...

.netcore 获取appsettings

我的开发环境是abpvnext net6.0 。 因为业务需要&#xff0c;从原来老项目net4.5工程里复制了一个报表导出的业务类到net6项目里面&#xff0c;但是他的获取appsettings的代码其实不用想都知道会报错。因为原来framwork时代获取appsettings的方法常见的是 System.Configura…...

额温枪方案,MS8551,MS8601;MS1112,MS1100

鉴于测温的传感器信号非常微弱&#xff0c;需要用高精度、低噪声的运算放大器和高精度、低功耗的ADC。 运算放大器可供选择&#xff1a;MS8551 or MS8601&#xff0c;具有低失调&#xff08;1uV&#xff09;、低噪&#xff08;22nV√Hz &#xff09;、封装小等优点&#xff0c…...

数字图像处理基础-用通俗语言进行超详细的总结

目录 图像感知与获取 韦伯定理 马赫带效应 图像获取 图像的采样和量化 图像内插&#xff08;重采样&#xff09; 图像的表示与描述 像素间的关系 exercise&#xff1a;4-邻域连通区域标记 本文章讲解数字图像处理的基础&#xff0c;大部分内容来源于课堂笔记中 图像感…...

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 的综述

文章作者&#xff1a;Libai 欢迎来到云计算世界&#xff0c;这里有无数的机会和无限的应用程序增长。 在当今的数字时代&#xff0c;企业可能会发现管理基础架构和扩展应用程序具有挑战性。 传统的本地解决方案需要大量的硬件、软件和维护前期投资。 要满足不断增长的需求&…...

【深度学习】卷积神经网络(CNN)

一、引子————边界检测 我们来看一个最简单的例子&#xff1a;“边界检测&#xff08;edge detection&#xff09;”&#xff0c;假设我们有这样的一张图片&#xff0c;大小88&#xff1a; 图片中的数字代表该位置的像素值&#xff0c;我们知道&#xff0c;像素值越大&#…...

科普:多领域分布式协同仿真

分布式协同仿真是一种在分布式计算环境中进行协同工作的仿真方法。使用该方法进行协同仿真时&#xff0c;仿真任务将被分发到多个计算节点上&#xff0c;并且这些节点可以同时工作以模拟完整的系统行为。分布式协同仿真已被广泛应用于工程、科学和军事领域&#xff0c;以便更好…...

openstack(2)

目录 块存储服务 安装并配置控制节点 安装并配置一个存储节点 验证操作 封装镜像 上传镜像 块存储服务 安装并配置控制节点 创建数据库 [rootcontroller ~]# mysql -u root -pshg12345 MariaDB [(none)]> CREATE DATABASE cinder; MariaDB [(none)]> GRANT ALL PR…...

Jmeter 压测保姆级入门教程

1、Jmeter本地安装 1.1、下载安装 软件下载地址&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/apache/jmeter/binaries/ 选择一个压缩包下载即可 然后解压缩后进入bin目录直接执行命令jmeter即可启动 1.2 修改语言 默认是英文的&#xff0c;修改中文&#xff0c;点击…...

springboot2.1升级到2.7 actuator丢失部分metrics端点

项目场景&#xff1a; 项目需要升级springboot从2.1升级至2.7 问题描述 发现之前的metrics后面的jvm相关的端口丢了 原因分析&#xff1a; 找到这样一篇博文https://blog.csdn.net/CL_YD/article/details/120309094&#xff0c;这篇博文意思是对的&#xff0c;但是写的不太好…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...