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

第八节:进阶特性高频题-Pinia与Vuex对比

优势:无嵌套模块、Composition API友好、TypeScript原生支持
核心概念:state、getters、actions(移除mutation)

深度对比 Pinia 与 Vuex:新一代状态管理方案的核心差异


一、核心架构设计对比

维度VuexPinia
设计目标集中式状态管理,强调严格流程控制轻量灵活,拥抱 Composition API 和 TypeScript
API 风格基于 Options API 设计,强依赖 this 上下文原生支持 Composition API,无 this 绑定
模块系统嵌套模块(modules)结构复杂扁平化 Store 设计,支持动态注册
状态修改方式必须通过 mutations 同步修改直接通过 actions 处理同步/异步操作

二、核心概念实现差异

  1. 状态定义与修改
    Vuex 示例(强制分离 mutation):

    const store = new Vuex.Store({state: { count: 0 },mutations: {increment(state) { state.count++ }},actions: {asyncIncrement({ commit }) {setTimeout(() => commit('increment'), 1000)}}
    })
    

    Pinia 示例(直接通过 actions 操作):

    export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() { this.count++ },async asyncIncrement() {setTimeout(() => this.increment(), 1000)}}
    })
    
  2. Getters 计算属性
    Vuex:

    getters: {doubleCount: state => state.count * 2
    }
    

    Pinia(支持组合式写法):

    getters: {doubleCount(): number {return this.count * 2},// 动态传参(需返回函数)multiplyBy(): (n: number) => number {return (n) => this.count * n}
    }
    

三、模块管理机制对比

  1. Vuex 的嵌套模块
    • 需要预先定义模块结构,产生深层嵌套

    • 命名空间容易冲突,需手动添加 namespaced: true

    const moduleA = { namespaced: true, state: { ... } }
    const store = new Vuex.Store({ modules: { a: moduleA } })
    // 使用需带命名空间前缀
    this.$store.commit('a/increment')
    
  2. Pinia 的扁平化 Store
    • 每个 Store 独立文件,支持按需加载

    • 自动合并到全局,无需命名空间

    // stores/counter.ts
    export const useCounterStore = defineStore('counter', { ... })// 组件中使用
    const counterStore = useCounterStore()
    counterStore.increment()
    

四、TypeScript 支持深度对比

特性VuexPinia
状态类型推断需手动声明模块类型自动推断 State/Actions/Getters 类型
Action 参数类型依赖复杂类型映射原生支持函数参数类型声明
插件开发支持类型定义繁琐提供完整的 Plugin 类型接口
代码提示体验需配合装饰器或额外配置开箱即用,完美支持 VSCode 智能提示

Pinia 类型推断示例:

interface UserState {name: stringage: number
}export const useUserStore = defineStore('user', {state: (): UserState => ({ name: 'Alice', age: 25 }),getters: {isAdult(): boolean {return this.age >= 18 // 自动推断 this 类型}},actions: {updateAge(newAge: number) {this.age = newAge // 类型安全检查}}
})

五、开发体验优化点

  1. Composition API 深度整合

    // 组件中直接组合多个 Store
    export default defineComponent({setup() {const counterStore = useCounterStore()const userStore = useUserStore()return { counterStore, userStore }}
    })
    
  2. 热模块替换(HMR)
    Pinia 支持 Vite 的热更新,修改 Store 自动刷新页面状态,无需手动重置。

  3. 插件生态对比

    功能Vuex 插件Pinia 插件
    持久化存储vuex-persistedstatepinia-plugin-persist
    路由集成vuex-router-sync通过组合式函数实现
    异步加载需自行封装defineStore 支持动态导入

六、性能与扩展性对比

维度VuexPinia
包体积3.6KB (gzip)1.5KB (gzip)
响应式系统基于 Vue2 的 defineProperty基于 Vue3 的 Proxy,性能更优
内存占用每个模块创建独立实例Store 按需加载,内存占用更低
服务端渲染需要复杂配置原生支持 SSR,无缝对接 Nuxt3

七、迁移策略与选型建议

  1. 新项目选型
    • 直接使用 Pinia:享受更简洁的 API 和更好的 TypeScript 支持

    • 需要兼容 Vue2 的遗留系统:继续使用 Vuex

  2. Vuex 迁移路径

    1. 安装 Pinia:`npm install pinia`
    2. 创建 Store 文件(如 `stores/user.ts`)
    3. 将 Vuex 的 state/mutations/actions 转换为 Pinia 格式
    4. 全局替换组件中的 `this.$store` 为 `useXxxStore()`
    5. 逐步删除 Vuex 相关代码
    
  3. 混合使用过渡方案

    // 在 Pinia 中集成 Vuex Store
    import { createStore } from 'vuex'
    const legacyStore = createStore({ /* ... */ })
    const pinia = createPinia()
    app.use(legacyStore).use(pinia)
    

总结
Pinia 通过 去中心化架构 和 组合式 API 设计,解决了 Vuex 在复杂项目中的模块嵌套冗余、类型推导困难等问题。其核心优势体现在:

  1. 极简 API:移除 mutation 层,简化状态修改流程
  2. 类型安全:从源码层面实现全链路 TypeScript 支持
  3. 开发效率:扁平化 Store 设计 + 自动代码提示
  4. 性能优势:基于 Vue3 响应式系统,内存占用更低

对于新项目,强烈推荐直接采用 Pinia;对于 Vuex 老项目,建议在迭代过程中逐步迁移。两者的核心差异体现了 Vue 生态从 Options API 到 Composition API 的设计哲学转变。

相关文章:

第八节:进阶特性高频题-Pinia与Vuex对比

优势:无嵌套模块、Composition API友好、TypeScript原生支持 核心概念:state、getters、actions(移除mutation) 深度对比 Pinia 与 Vuex:新一代状态管理方案的核心差异 一、核心架构设计对比 维度VuexPinia设计目标集…...

路由交换网络专题 | 第七章 | BGP练习 | 次优路径 | Route-Policy | BGP认证

基本部分配置讲解: 配置BGP相关部分: // BGP区域配置: 用作环回口创建BGP对等体// “ipv4-family unicast”是指进入BGP的IPv4单播地址族视图。 // 配置完后仅仅只在IPV4地址簇下建立对等体。* [AR3]bgp 100 [AR3-bgp]peer 1.1.1.1 as-number 100 [AR…...

序论文42 | patch+MLP用于长序列预测

论文标题:Unlocking the Power of Patch: Patch-Based MLP for Long-Term Time Series Forecasting 论文链接:https://arxiv.org/abs/2405.13575v3 代码链接:https://github.com/TangPeiwang/PatchMLP (后台回复“交流”加入讨…...

【mongodb】系统保留的数据库名

目录 1. admin2. config3. local4. test(非严格保留,但常作为默认测试数据库)5. 注意事项6. 其他相关说明 1. admin 1.用途:用于存储数据库的权限和用户管理相关数据。2.特点:该数据库是 MongoDB 的超级用户数据库&am…...

js 的call 和apply方法用处

主要用于ECMAScript与宿主环境(文档对象(DOM)、浏览器对象(BOM))的交互中; 例子:function changeStyle(attr, value){ this.style[attr] value; } …...

济南国网数字化培训班学习笔记-第二组-2节-输电线路施工及质量

输电线路施工及质量 质量管控基本规定 基本规定 项目分类 土石方(测量挖坑)、基础、杆塔、架线、接地、线路防护 检验项目分类原则: 1.主控项目:影响工程性能、强度、安全性和可靠性,且不易修复和处理 2.一般项…...

“Daz to Unreal”将 G8 角色(包括表情)从 daz3d 导入到 UE5。在 UE5 中,我发现使用某个表情并与闭眼混合后,上眼睑出现了问题

1) Bake & Export Corrective Morphs from Daz before you go into UE5 1) 在进入 UE5 之前,从 Daz 烘焙并导出修正型变形 In Daz Studio 在 Daz Studio 中 Load your G8 head, dial in the exact mix (e.g. Smile 1.0 Eyes Closed 1.0). 加载你的 G8 头部&am…...

Linux系统之----进程优先级、调度与切换

在开启本篇文章的学习之前,我们先要熟悉如下两个事 1.概念 进程优先级指的是进程能得到某种资源的先后顺序,要理解好它与权限的关系,优先级是 能,拥有资源的先后顺序,权限是 能还是不能的问题 2.为什么要有优先级…...

Web3钱包开发功能部署设计

Web3钱包开发功能部署设计全景指南(2025技术架构与实战) ——从核心模块到多链生态的完整解决方案 一、核心功能模块设计 1.1 资产管理体系 Web3钱包的核心功能围绕资产存储、交易验证、多链兼容展开: • 密钥管理:…...

【含文档+PPT+源码】基于SpringBoot的开放实验管理平台设计与实现

项目介绍 本课程演示的是一款基于SpringBoot的开放实验管理平台设计与实现,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含:项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系统…...

小刚说C语言刷题——1317正多边形每个内角的度数?

1.题目描述 根据多边形内角和定理,正多边形内角和等于:( n-2 ) 180∘ ( n 大于等于 3且 n 为整数) 请根据正多边形的边数,计算该正多边形每个内角的度数。(结果保留1位小数&#x…...

Spring—AOP

AOP是在不惊动原有的代码的基础上对功能进行增强操作 连接点:JoinPoint,可以被AOP控制的方法 通知:Advice,增强的逻辑,共性功能 切入点:PointCut,匹配连接点的条件,表明连接点中哪…...

算法训练营第二天| 209.长度最小的子数组、59.螺旋矩阵II、区间和

209.长度最小的子数组 题目 思路与解法 **第一想法&#xff1a;**无 carl的讲解&#xff1a; 滑动窗口 class Solution:def minSubArrayLen(self, target: int, nums: List[int]) -> int:ij0lens len(nums)sum 0res lens 1while j < lens:# for m in range(i, j1)…...

【C++ 真题】P3456 [POI2007] GRZ-Ridges and Valleys

[POI2007] GRZ-Ridges and Valleys 题面翻译 题目描述 译自 POI 2007 Stage 2. Day 0「Ridges and Valleys」 给定一个 n n n \times n nn 的网格状地图&#xff0c;每个方格 ( i , j ) (i,j) (i,j) 有一个高度 w i j w_{ij} wij​。如果两个方格有公共顶点&#xff0c…...

Vue3 中 computed的详细用法

Vue 3 中 computed 是一个非常重要的响应式 API&#xff0c;它是基于其依赖项的值来计算得出的值&#xff0c;当依赖项发生变化时&#xff0c;计算属性会自动更新 基本用法 在选项式 API 中&#xff0c;computed 通常作为一个选项直接在组件的选项对象中定义。例如 <temp…...

位带和位带别名区

位带区域和位带别名区域 位带区域&#xff08;Bit-banding&#xff09;是一种技术&#xff0c; 允许开发者直接访问和修改内存中的单个位。 这种技术在某些微控制器&#xff08;如ARM Cortex-M系列&#xff09;中特别有用&#xff0c;因为它可以简化对寄存器位的访问和修改。 …...

DRF凭什么更高效?Django原生API与DRF框架开发对比解析

一、原生 Django 开发 API 的局限性 虽然 Django 可以通过 JsonResponse 和视图函数手动构建 API&#xff0c;但存在以下问题&#xff1a; 手动序列化与反序列化 需要手动将模型实例转换为 JSON&#xff0c;处理复杂数据类型&#xff08;如嵌套关系&#xff09;时代码冗长且易…...

Agent智能体应用详解:从理论到实践的技术探索

一、Agent智能体是什么&#xff1f; 1. 核心定义 Agent智能体是能够感知环境、自主决策并执行动作以实现目标的软件实体。其核心特征包括&#xff1a; 自主性&#xff1a;无需外部指令持续运行。 反应性&#xff1a;实时响应环境变化。 目标导向&#xff1a;基于预设或学习…...

Windows下使用 VS Code + g++ 开发 Qt GUI 项目的完整指南

&#x1f680; 使用 VS Code g 开发 Qt GUI 项目的完整指南&#xff08;Windows MSYS2&#xff09; 本指南帮助你在 Windows 下使用 VS Code g CMake Qt6 快速搭建 Qt GUI 项目&#xff0c;适合熟悉 Visual Studio 的开发者向跨平台 VS Code 工具链迁移。 &#x1f6e0;️…...

arm64适配系列文章-第三章-arm64环境上mariadb的部署

ARM64适配系列文章 第一章 arm64环境上kubesphere和k8s的部署 第二章 arm64环境上nfs-subdir-external-provisioner的部署 第三章 arm64环境上mariadb的部署 第四章 arm64环境上nacos的部署 第五章 arm64环境上redis的部署 第六章 arm64环境上rabbitmq-management的部署 第七章…...

YOLOv8融合CPA-Enhancer【提高恶略天气的退化图像检测】

1.CPA介绍 CPA-Enhancer通过链式思考提示机制实现了对未知退化条件下图像的自适应增强&#xff0c;显著提升了物体检测性能。其插件式设计便于集成到现有检测框架中&#xff0c;并在物体检测及其他视觉任务中设立了新的性能标准&#xff0c;展现了广泛的应用潜力。 关于CPA-E…...

编译 C++ 报错“找不到 g++ 编译器”的终极解决方案(含 Windows/Linux/macOS)

前言 在使用终端编译 C 程序时&#xff0c;报错&#xff1a; 或类似提示&#xff0c;意味着你的系统尚未正确安装或配置 g 编译器。本篇将从零手把手教你在 Windows / Linux / macOS 下安装并配置 g&#xff0c;适用于新手或 C 入门阶段的你。 什么是 g&#xff1f; g 是 GN…...

Spring 过滤器详解:从基础到实战应用

Spring 过滤器详解&#xff1a;从基础到实战应用 引言 在 Spring 框架中&#xff0c;过滤器&#xff08;Filter&#xff09;是处理 HTTP 请求和响应的重要组件。它们为开发者提供了一种在请求到达控制器之前或响应返回客户端之前进行操作的机制。本文将深入探讨 Spring 中常见…...

达梦并行收集统计信息

达梦收集统计信息速度如何&#xff1f; 答&#xff1a;1分钟1G 大库收集起来可能比较慢&#xff0c;想并行收集需要一些条件 3个参数先了解一下 我把max_parallel_degree改为16 相关说明可以看一下 对一个3G的表收集 收集方法 DBMS_STATS.GATHER_TABLE_STATS( TEST,T1,…...

AOSP CachedAppOptimizer 冻结方案

背景 Android 一直面临一个核心难题&#xff1a;如何优化进程对有限系统资源&#xff08;如 CPU、电量&#xff09;的使用&#xff0c;同时保证用户体验。 当进程进入后台后&#xff0c;它们虽不再贡献用户体验&#xff0c;却仍可能消耗资源。传统的杀后台方案虽然节省资源&a…...

JVM-类加载机制

类加载 前言&#xff1a;为什么需要了解类加载&#xff1f;什么是类加载&#xff1f;生命周期概览类加载过程详解3.1 加载 (Loading)3.2 连接 (Linking)3.2.1 验证 (Verification)3.2.2 准备 (Preparation)3.2.3 解析 (Resolution) 3.3 初始化 (Initialization)3.3.1 <clini…...

【小白福音】SFTP限制权限登录

下面以在 Linux 环境(例如 Ubuntu 或 CentOS)上配置 SFTP chroot 为例,给出详细的步骤说明。即使你不熟悉服务器运维,也可以按照以下步骤进行配置,保证指定的 SFTP 用户只能访问预设目录,而无法触碰其他文件。 目录 一、配置SFTP权限1. 创建专用 SFTP 用户和用户组2. 搭建…...

海量数据笔试题--Top K 高频词汇统计

问题描述&#xff1a; 假设你有一个非常大的文本文件&#xff08;例如&#xff0c;100GB&#xff09;&#xff0c;文件内容是按行存储的单词&#xff08;或其他字符串&#xff0c;如 URL、搜索查询词等&#xff09;&#xff0c;单词之间可能由空格或换行符分隔。由于文件巨大&…...

Postman设置环境变量与Token

设置环境变量 设置某个Collection下的变量...

项目中数据结构为什么用数组,不用List

总结 1&#xff0c;从内存和性能角度&#xff0c;数组占用更小的内存&#xff08;&#xff09;&#xff0c;访问性能更高&#xff08;&#xff09; 分配效率&#xff1a;数组在内存中是连续分配的一块固定空间 访问速度&#xff1a;直接操作内存&#xff0c;数组的读写操作是…...

Linux常见指令介绍下(入门级)

1. head head就和他的名字一样&#xff0c;是显示一个文件头部的内容&#xff08;会自动排序&#xff09;&#xff0c;默认是打印前10行。 语法&#xff1a;head [参数] [文件] 选项&#xff1a; -n [x] 显示前x行。 2. tail tail 命令从指定点开始将文件写到标准输出.使用t…...

从Kafka读取数据

用Spark-Streaming从Kafka读取数据 在大数据处理领域&#xff0c;Spark-Streaming和Kafka都是明星技术。今天咱们就来聊聊怎么用Spark-Streaming从Kafka读取数据并做处理&#xff0c;就算你是小白&#xff0c;也保证能看懂&#xff01;先讲讲从Kafka获取数据的两种方式。早期有…...

硬件工程师面试常见问题(7)

第三十一问&#xff1a;RTC电路&#xff0c;电池寿命估算 上图可知&#xff0c;该电路有两个供电一个是电池供电&#xff0c;一个是其他供电&#xff0c;已知电池大小为120mAh&#xff0c;该电路在电池供电下吃3uA的电流&#xff0c;计算 120*&#xff08;10^3&#xff09;/ 3…...

二分小专题

P1102 A-B 数对 P1102 A-B 数对 暴力枚举还是很好做的&#xff0c;直接上双层循环OK 二分思路:查找边界情况&#xff0c;找出最大下标和最小下标&#xff0c;两者相减1即为答案所求 废话不多说&#xff0c;上代码 //暴力O(n^3) 72pts // #include<bits/stdc.h> // usin…...

Explain详解与索引最佳实践

Explain工具介绍 使用EXPLAIN关键字可以模拟优化器执行SQL语句&#xff0c;分析你的查询语句或是结构的性能瓶颈 在 select 语句之前增加 explain 关键字&#xff0c;MySQL 会在查询上设置一个标记&#xff0c;执行查询会返回执行计划的信息&#xff0c;而不是执行这条SQL 注意…...

【Qt6 QML Book 基础】07:布局项 —— 锚定布局与动态交互(附完整可运行代码)

引言 在 QML 界面开发中&#xff0c;** 锚定布局&#xff08;Anchors&#xff09;** 是实现响应式设计的核心机制。通过声明式的锚定规则&#xff0c;开发者无需手动计算坐标&#xff0c;即可让元素与父容器或其他元素保持动态位置关联。本文结合官方示例&#xff0c;详细解析…...

rocky9.4部署k8s群集v1.28.2版本(containerd)(纯命令)

文章目录 前言三个节点的主机名 所有节点操作主机名和ip解析关闭交换分区&#xff0c;关闭防火墙&#xff0c;关闭selinux更换阿里云yum源时间同步修改内核参数修改系统最大打开文件数开启bridge网桥过滤&#xff0c;加载br_netfilter模块&#xff0c;加载配置文件安装ipset及i…...

Crawl4AI 部署安装及 n8n 调用,实现自动化工作流(保证好使)

Crawl4AI 部署安装及 n8n 调用&#xff0c;实现自动化工作流&#xff08;保证好使&#xff09; 简介 Crawl4AI 的介绍 一、Crawl4AI 的核心功能 二、Crawl4AI vs Firecrawl Crawl4AI 的本地部署 一、前期准备 二、部署步骤 1、检查系统的网络环境 2、下载 Crawl4AI 源…...

onlyoffice8.3.3发布了-豆豆容器市场同步更新ARM64版本

8.3.3 修复内容 文档编辑器 • 修复从右到左&#xff08;RTL&#xff09;段落的计算问题 (DocumentServer#2590) • 修复从右到左段落中"项目符号/编号/多级列表"样式缩略图的显示问题 • 修复从右到左段落中编号列表&#xff08;项目符号&#xff09;的显示问题 (…...

rabbitmq安装项目集成

使用Docker来安装 1.1.下载镜像 docker pull rabbitmq:3-management 1.2.安装MQ docker run \-e RABBITMQ_DEFAULT_USER=root \-e RABBITMQ_DEFAULT_PASS=123123 \--name mq \--hostname mq1 \-p 15672:15672 \-p 5672:5672 \-d \rabbitmq:3-management 15672:RabbitMQ提供…...

济南国网数字化培训班学习笔记-第二组-3节-电网工程建设项目部门

电网工程建设项目部 组成 监理项目部 履行监理合同&#xff0c;监理单位派驻&#xff1a;负责合同管理&#xff0c;审查&#xff0c;见证&#xff0c;旁站&#xff0c;巡视&#xff0c;验收&#xff0c;控制进度&#xff0c;安全&#xff0c;质量&#xff0c;协调各方 造价…...

JDK(java)安装及配置 --- app笔记

JDK官方下载地址&#xff1a;Java Downloads | Oracle 安装好后&#xff0c;配置 “环境变量”&#xff1a; 新建JAVA_HOME变量&#xff0c;值为 jdk 安装 根目录&#xff08;C:\Program Files\Java\jdk-24&#xff09; 在path变量最后面&#xff0c;添加 %JAVA_HOME% 新建 CLA…...

【前端】【面试】在前端开发中,如何优化 CSS 以提升页面渲染性能?

题目&#xff1a;在前端开发中&#xff0c;如何优化 CSS 以提升页面渲染性能&#xff1f; 关键词总结 关键词说明选择器优化避免通配符、减少层级深度、防止后代选择器过度嵌套样式规则优化合并重复规则、慎用高成本属性加载与渲染优化关键 CSS 优先加载、合理使用媒体查询文…...

python的mtcnn检测图片中的人脸并标框

python的mtcnn检测图片中的人脸并标框&#xff0c;标记鼻尖位置 import cv2 from mtcnn import MTCNN# 初始化 MTCNN 检测器 # stages&#xff1a;指定检测阶段 # 指定运行设备为CPU detector MTCNN(stages"face_and_landmarks_detection", device"CPU:0"…...

矩阵系统源码搭建账号分组功能开发全流程解析,支持OEM

在短视频矩阵运营场景下&#xff0c;企业和创作者往往管理着数十甚至上百个不同平台的账号&#xff0c;传统的统一管理模式效率低下&#xff0c;难以满足精细化运营需求。矩阵系统的账号分组功能通过对账号进行分类整合&#xff0c;实现差异化管理与精准化操作。本文将从功能需…...

跟着deepseek学golang--认识golang

文章目录 一、Golang核心优势1. 极简部署方式生产案例​​&#xff1a;依赖管理​​&#xff1a;容器实践​​&#xff1a; 2. 静态类型系统​​类型安全示例​​&#xff1a;性能优势​​&#xff1a;​​代码重构​​&#xff1a; 3. 语言级并发支持​​GMP调度模型实例​​&…...

如何创建极狐GitLab 议题?

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 创建议题 (BASIC ALL) 创建议题时&#xff0c;系统会提示您输入议题的字段。 如果您知道要分配给议题的值&#xff0c;则可…...

制造工厂如何借助电子看板实现高效生产管控

在当今高度竞争的制造业环境中&#xff0c;许多企业正面临着严峻的管理和生产挑战。首先&#xff0c;管理流程落后&#xff0c;大量工作仍依赖"人治"方式&#xff0c;高层管理者理论知识薄弱且不愿听取专业意见。其次&#xff0c;生产过程控制能力不足&#xff0c;导…...

QLExpress 深度解析:构建动态规则引擎的利器

QLExpress 深度解析:构建动态规则引擎的利器 在现代业务系统中,“规则变更快、逻辑复杂、发布要求高”已成为常态。传统硬编码已无法满足这种需求。本文以阿里巴巴开源的轻量级表达式引擎 QLExpress 为例,从实际应用、核心结构到落地建议,系统解析其强大能力和设计哲学。 …...

Java Thread类深度解析:构造方法与核心方法全攻略

一、Thread类的作用与线程模型 Thread类是Java多线程编程的核心&#xff0c;每个线程都与一个唯一的Thread对象关联。JVM通过Thread对象管理线程的整个生命周期。理解以下核心概念至关重要&#xff1a; 任务定义&#xff1a;通过run()方法描述线程要执行的任务 线程创建&…...