《Pinia 从入门到精通》Vue 3 官方状态管理 -- 插件扩展篇
使用插件扩展功能
- 可以同时使用多个插件(插件“中间件式”机制)
- 一、使用多个插件的方式
- 二、插件机制简图
- 三、插件互不冲突的关键点
- 四、实战示例:多插件组合使用
- 五、组合使用注意事项
- 推荐插件组合搭配方案(实战模板)
- 根据不同 Store 应用不同插件
- 🧠 原理说明:
- 🔧 示例:不同 Store 应用不同插件逻辑
- 1. 插件模板(适用于多个 Store)
- 2. 注册时统一使用该插件
- 🧩 更灵活的“插件调度器”方案
- ✅ 思路:创建一个“插件调度器”,在其中根据 store id 路由到具体插件函数
- 🧠 Bonus:Store 中显式控制插件启用(更精细)
- ✅ 小结:插件应用范围控制方法
可以同时使用多个插件(插件“中间件式”机制)
Pinia 插件是可以同时使用多个的,而且它们是按顺序依次作用在每个 Store 上的。这种机制非常适合组合功能,比如同时使用持久化、日志追踪、权限守卫等插件,构建出一个高度自动化、具备横切能力的状态管理体系。
一、使用多个插件的方式
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import piniaLogger from 'pinia-plugin-logger'
import { authGuardPlugin } from './plugins/authGuard'
import { apiPlugin } from './plugins/api'const pinia = createPinia()// 插件注册顺序决定执行顺序(按 use 添加顺序生效)
pinia.use(piniaPluginPersistedstate)
pinia.use(piniaLogger)
pinia.use(authGuardPlugin)
pinia.use(apiPlugin)app.use(pinia)
二、插件机制简图
defineStore()│└───> 插件1 处理 store(如注入 persist)│└───> 插件2 处理 store(如注入 logger)│└───> 插件3 ...
三、插件互不冲突的关键点
- 插件返回值是附加在
store
上的属性(如$api
、$persist
) - 插件内部用
$onAction
/$subscribe
监听,不会篡改 state 本身 - 多个插件监听同一字段或 action 是允许的,但应避免“副作用冲突”
四、实战示例:多插件组合使用
// plugins/api.ts
export const apiPlugin = ({ store }) => {store.$api = axios.create({ baseURL: '/api' })
}// plugins/logger.ts
export const loggerPlugin = ({ store }) => {store.$onAction(({ name, args }) => {console.log(`[Action]: ${name}`, args)})
}// plugins/authGuard.ts
export const authGuardPlugin = ({ store }) => {if (store.$id === 'auth') {store.$onAction(({ name, after }) => {if (name === 'logout') {console.warn('退出登录,清理本地缓存...')}})}
}
全局注册:
pinia.use(apiPlugin)
pinia.use(loggerPlugin)
pinia.use(authGuardPlugin)
pinia.use(piniaPluginPersistedstate)
在 Store 中使用:
export const useUserStore = defineStore('user', {state: () => ({ token: '', userInfo: null }),actions: {async login(data) {const res = await this.$api.post('/login', data)this.token = res.data.token}},persist: true // 与持久化无缝结合
})
五、组合使用注意事项
注意点 | 说明 |
---|---|
插件注册顺序影响执行顺序 | 如 logger 在 auth 之前,则先记录 action 再处理登出 |
不应在插件中同步修改状态 | 应通过 action 或订阅完成副作用逻辑 |
插件注入变量应使用 $ 前缀 | 避免与 state 属性冲突 |
SSR 场景需判断 process.client | 插件中涉及浏览器 API 时需处理 |
推荐插件组合搭配方案(实战模板)
场景 | 推荐组合 |
---|---|
用户系统 | persistedstate + authGuard + logger |
表单缓存 | persistedstate (限路径) + logger |
多模块项目 | dynamicModulePlugin + apiPlugin + i18nPlugin |
SSR(Nuxt) | persistedstate (仅客户端启用) + 自定义 hydrationPlugin |
根据不同 Store 应用不同插件
按需组合与定向应用 —— 这是大型项目中常见的“精细化状态管理优化”策略。
Pinia 插件机制本质上是作用于 每个 Store 实例初始化时,而不是全局一次性设置。因此,我们可以通过插件内部判断当前正在处理的 Store,再决定是否注入特定逻辑或功能。
🧠 原理说明:
// 插件本质结构
function myPlugin(context: PiniaPluginContext) {const { store } = contextif (store.$id === 'auth') {// 仅作用于 auth 模块} else if (store.$id === 'settings') {// 仅作用于 settings 模块}
}
🔧 示例:不同 Store 应用不同插件逻辑
1. 插件模板(适用于多个 Store)
// plugins/customPlugin.ts
export function customPlugin({ store }) {switch (store.$id) {case 'auth':store.$onAction(({ name }) => {console.log(`[auth action]: ${name}`)})breakcase 'settings':store.$subscribe((mutation, state) => {console.log(`[settings changed]: ${mutation.events}`, state)})breakdefault:break}
}
2. 注册时统一使用该插件
const pinia = createPinia()
pinia.use(customPlugin)
🧩 更灵活的“插件调度器”方案
适用于多个插件对多个 store 进行组合控制。
✅ 思路:创建一个“插件调度器”,在其中根据 store id 路由到具体插件函数
// plugins/dispatcher.tsimport { pluginForAuth } from './plugin-auth'
import { pluginForSettings } from './plugin-settings'const pluginMap = {auth: pluginForAuth,settings: pluginForSettings
}export const pluginDispatcher = (ctx: PiniaPluginContext) => {const plugin = pluginMap[ctx.store.$id]if (plugin) {plugin(ctx)}
}
// plugin-auth.ts
export const pluginForAuth = ({ store }) => {store.$onAction(({ name }) => {console.log(`[Auth Action]: ${name}`)})
}
// plugin-settings.ts
export const pluginForSettings = ({ store }) => {store.$subscribe((mutation) => {console.log(`[Settings Updated]:`, mutation)})
}
// main.ts
pinia.use(pluginDispatcher)
✅ 这种方式非常适合大型系统中:
- 每个模块拥有独立插件逻辑
- 插件逻辑可测试、可维护、易扩展
- 动态按需启用,避免全局插件逻辑污染
🧠 Bonus:Store 中显式控制插件启用(更精细)
如果你希望 store 自身控制启用哪些插件逻辑,可以通过 state 或 meta 配置标记:
// 在 store 中配置
export const useUserStore = defineStore('user', {state: () => ({enableLogger: true})
})
// 在插件中读取配置
if (store.enableLogger) {store.$onAction(...)
}
✅ 小结:插件应用范围控制方法
方法 | 特点 |
---|---|
if (store.$id === 'xxx') 判断 | 最直接,可快速实现按 store 分支逻辑 |
插件调度器 pluginDispatcher | 模块化管理多插件逻辑,高度可维护 |
store 中定义 meta/config 控制 | 由 store 主动控制,支持动态开关插件功能 |
相关文章:
《Pinia 从入门到精通》Vue 3 官方状态管理 -- 插件扩展篇
使用插件扩展功能 可以同时使用多个插件(插件“中间件式”机制)一、使用多个插件的方式二、插件机制简图三、插件互不冲突的关键点四、实战示例:多插件组合使用五、组合使用注意事项推荐插件组合搭配方案(实战模板) 根…...
JavaScript 中的 Reflect 对象:深入理解与应用
JavaScript 中的 Reflect 对象:深入理解与应用 一、引言 在 JavaScript 不断发展的过程中,ES6 引入了许多新的特性和对象,其中 Reflect 对象是一个强大且实用的工具。Reflect 对象提供了一系列静态方法,这些方法与 Proxy 对象的…...
dirsearch 使用教程:详细指南与配置解析
dirsearch 是一款强大的开源命令行工具,用于对 Web 服务器进行目录和文件暴力破解。它通过扫描目标网站,尝试发现隐藏的目录、文件或潜在的敏感资源,广泛应用于渗透测试和安全审计。dirsearch 提供丰富的选项和灵活的配置文件支持,…...
【C++基础知识】C++类型特征组合:`disjunction_v` 和 `conjunction_v` 深度解析
这两个模板是C17引入的类型特征组合工具,用于构建更复杂的类型判断逻辑。下面我将从技术实现到实际应用进行全面剖析: 一、基本概念与C引入版本 1. std::disjunction_v (逻辑OR) 引入版本:C17功能:对多个类型特征进行逻辑或运算…...
ctfhow——web入门214~218(时间盲注开始)
web入门214 #another:uwvwko import requestsurlhttp://b0c11589-31c9-4bf9-8b66-6b5a1fc08726.challenge.ctf.show/api/index.php flag str{-_1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM}for i in range(1,50):for j in str:# 查数据库# payload "…...
shell练习(2)
1.给脚本service.sh进行修改,当执行的时候要求输入(1、2、3、4、5)时安装对应的httpd、vim、wget、更换aliyum等功能,当输入错误 时提示应该输入正确的值但是不会退出。 [rootbogon yy]# cat service.sh #!/bin/bash while : do cat <<-EOF --------------…...
【GO语言小案例手记】基于GIN的简易代理网关
基于GIN的简易代理网关 背景目标开工依赖主体代码配置文件 后记 背景 正好最近对GO也有点兴趣,搞个小项目练练手。 目标 网关需要能够根据路由自动映射到服务支持轮询、加权轮询、随机轮询三种算法简单好理解好使用,最好一个配置文件就能跑起来网关本…...
Qt 入门 6 之布局管理
Qt 入门 6 之布局管理 对于一个完整的软件,布局管理时必不可少的。其会让界面中嗯嗯部件呈现一个整齐的排列,也可令其大小随着窗口界面的大小变换而变化Qt 主要提供了QLayout 类及其子类作为布局管理器,他们可以实现常用的布局管理功能&…...
Java技术体系的主要产品线详解
Java技术体系的主要产品线详解 Java Card:支持Java小程序(Applets)运行在小内存设备(如智能卡)上的平台。 Java ME(Micro Edition):支持Java程序运行在移动终端(手机、P…...
第四章: 服务集成抽象
Chapter 4: 服务集成抽象 🌟 从上一章到本章 在第三章:传输机制中,我们学习了如何通过STDIO和SSE协议让LLM与不同服务器通信。现在想象这样的场景:你的AI助手需要同时操作本地文件和云端数据库。这时问题来了——如何让LLM像操作…...
高精度并行2D圆弧拟合(C++)
依赖库 Eigen3 GLM Ceres-2.1.0 glog-0.6.0 gflag-2.2.2 基本思路 Step 1: RANSAC找到圆弧,保留inliers点; Step 2:使用ceres非线性优化的方法,拟合inliers点,得到圆心和半径; -------…...
【防火墙 pfsense】1简介
(1) pfSense 有以下可能的用途: 边界防火墙 路由器 交换机 无线路由器 / 无线接入点 从OSI7层模型了解设备在典型网络结构中所处的位置。 (2)边界防火墙 ->要充当边界防火墙,pfSense 系统至少需要两个接…...
GPT-4o最新图像生成完全指南:10大应用场景与提示词模板
引言 OpenAI于近期推出的全新GPT-4o图像生成功能,代表了AI图像创作领域的重大突破。作为一个原生多模态系统,GPT-4o将文本理解和图像生成无缝整合,为创作者、教育工作者和专业人士提供了前所未有的视觉创作灵活性。本文将分享10个GPT-4o图像…...
32单片机——外部中断
STM32F103ZET6的系统中断有10个,外部中断有60个 1、中断的概念 中断是为使单片机具有对外部或内部随机发生的事件实时处理而设置的,中断功能的存在,很大程度上提高了单片机处理外部或内部事件的能力 eg::你打开火&…...
《Pinia 从入门到精通》Vue 3 官方状态管理 -- 进阶使用篇
《Pinia 从入门到精通》Vue 3 官方状态管理 – 基础入门篇 《Pinia 从入门到精通》Vue 3 官方状态管理 – 进阶使用篇 《Pinia 从入门到精通》Vue 3 官方状态管理 – 插件扩展篇 目录 Store 的模块化设计4.1 多模块结构设计✅ 推荐目录结构(中大型项目) …...
HarmonyOs @hadss/hmrouter路由接入
参考文档:官方文档 在根目录oh-package.json5配置 {"dependencies": {"hadss/hmrouter": "^1.0.0-rc.11"} }加入路由编译插件 hvigor/hvigor-config.json文件 {"dependencies": {"hadss/hmrouter-plugin": &…...
第九节:性能优化高频题-首屏加载优化策略
路由懒加载:component: () > import(‘…’) CDN加速第三方库、Tree-Shaking移除未使用代码 前端首屏加载优化核心策略解析 一、路由懒加载:按需拆分代码块 实现原理 通过动态导入语法 import() 将路由组件拆分为独立代码块,仅在用户访问…...
ESP32_IDF_VScode安装多版本共存
ESP32_IDF_VScode安装多版本共存 一、安装离线版本idf 详情见文章:ESP32_IDF_基于win11的开发环境搭建 二、windows的VScode安装乐鑫插件 三、导入已经安装好的idf(将VScode插件和本地安装的IDF绑定的一个关系) 1、选择“配置ESP-IDF扩展”…...
JavaScript 的“积木”:函数入门与实践
引言:告别重复,拥抱模块化 想象一下,你在写代码时发现,有几段逻辑几乎一模一样,需要在不同的地方反复使用。你是选择每次都复制粘贴,还是希望能像搭积木一样,把这段逻辑封装起来,需…...
代码注释标记的含义
在代码中,TODO 是一种常用的注释标记,用于标识需要后续处理或完善的任务。它是开发者之间的常见约定,帮助团队协作和任务管理。以下是详细解释: 1. TODO 的核心含义 待办事项:标记代码中需要完成但尚未实现的功能、需…...
深度学习:迁移学习
迁移学习 标题1.什么是迁移学习 迁移学习(Transfer Learning)是一种机器学习方法,就是把为任务 A 开发 的模型作为初始点,重新使用在为任务 B 开发模型的过程中。迁移学习是通过 从已学习的相关任务中转移知识来改进学习的新任务,虽然大多数…...
Nest集成健康检查
文章目录 前言✅ NestJS 健康检查集成思路(标准实践)📦 推荐使用官方包: 🧱 结构设计✅ 1. 创建健康模块✅ 2. 集成 nestjs/terminushealth.module.tshealth.controller.ts ✅ 3. 在 AppModule 注册模块 🔍…...
第十五届蓝桥杯 2024 C/C++组 拼正方形
目录 题目: 题目描述: 题目链接: 思路: 思路详解: 易错点: 代码: 代码详解: 题目: 题目描述: 题目链接: P10898 [蓝桥杯 2024 省 C] 拼正…...
前端出现的一些新技术或者升级的技术汇总
以下是截至2024年第三季度前端领域的最新技术动态与论坛热议焦点,涵盖框架、工具链、性能优化等方向,结合社区讨论和实际案例展开分析: 一、框架演进与争议热点 1. React 19「Actions」引发范式转变 核心变化: 服务端Actions&…...
SQL数据类型
数字类型 1. 整型(Integer) 整型数据类型用于存储整数值,不包含小数部分。通常用于表示没有小数部分的数字,如年龄、数量、ID 等。 常见的整型数据类型: INT:用于存储常规整数值,通常占用 4 字…...
手机访问电脑端Nginx服务器配置方式
修改当前站点Nginx的配置如下。其中端口号必须是一个比较独特的端口号,比如8001。这样可以跟别的项目区分开来。域名使用0.0.0.0。 server {listen 80;listen 8001;server_name zfmap.cc 0.0.0.0;假设你电脑端的ip地址是192.168.1.101,那么你的手机与你的电脑连在同…...
PyQt6基础_QTabWidget
目录 代码 运行 官方文档 PySide6.QtWidgets.QTabWidget - Qt for Python 代码 class TempWidget(QWidget):def __init__(self):super().__init__()self.tabs QTabWidget()self.tabs.tabBarClicked.connect(self.tabs_tabBarClicked)widget_tab1 QWidget()widget_tab2…...
海思ISP调试记录
1、proc_param 功能:在海思中,proc_param参数用来控制每个多少帧更新一次ISP,默认是30帧。 过短的更新间隔会导致图像参数不稳定,产生闪烁或色彩跳跃4过长的间隔会使3A调整滞后,影响动态场景适应性1海思建议在1080p3…...
以运营为核心的智能劳动力管理系统,破解连锁零售、制造业排班难题
在连锁零售、制造业、物流等劳动力密集型行业中,排班与考勤管理不仅是人力资源管理的核心环节,更是直接影响企业运营效率、成本控制与合规风险的关键场景。尤其在当前经济环境下,企业面临用工成本攀升、政策合规趋严、业务波动频繁等多重挑战…...
缓存穿透、雪崩、击穿深度解析与解决方案
缓存穿透、雪崩、击穿深度解析与解决方案 一、缓存三大核心问题全景解析 1. 问题定位与影响分析 问题类型触发条件典型现象核心风险缓存穿透大量请求访问不存在的键Redis 命中率骤降(<10%)数据库压力激增,可能宕机缓存雪崩大量缓存键同…...
【AI】基于OllamaSharp与.NET Core API的高效LLM查询实现
本文旨在演示如何通过OllamaSharp NuGet包在.NET Core API中高效查询Ollama大语言模型,重点展示如何通过JSON配置文件动态设置模型参数和服务器地址,实现灵活维护的AI服务架构。 创建.NET Core API项目dotnet new webapi -n OllamaLLMAPI cd OllamaLLMAPI添加OllamaSharp NuG…...
kotlin和MVVM的结合使用总结(二)
MVVM 架构详解 核心组件:ViewModel 和 LiveData 在 Android 中,MVVM 架构主要借助 ViewModel 和 LiveData 来实现。ViewModel 负责处理业务逻辑,而 LiveData 则用于实现数据的响应式更新。 ViewModel 的源码分析 ViewModel 的核心逻辑在 …...
U盘能识别但无法写入数据的原因
1. U 盘物理损坏 原因:U 盘内部存储芯片、电路板或接口接触不良,可能因摔落、高温、频繁插拔等导致。表现:插入电脑能识别盘符,但读写时提示 “磁盘错误”“无法访问” 或操作无反应。解决方法: 尝试用其他设备&#…...
多模态大模型 Qwen2.5-VL 的学习之旅
Qwen-VL 是阿里云研发的大规模视觉语言模型(Large Vision Language Model, LVLM)。Qwen-VL 可以以图像、文本、检测框作为输入,并以文本和检测框作为输出。Qwen-VL 系列模型性能强大,具备多语言对话、多图交错对话等能力ÿ…...
linux sudo 命令介绍
sudo(superuser do)是一个用于 Linux 系统的命令,它允许授权用户以其他用户(通常是 root 超级用户)的安全权限执行命令。 有了 sudo,用户在执行特定的、需要更高权限的操作时,就不需要切换到 r…...
STM32F103系列单片机寄存器操作和标准库操作
关于stm32,标准库很早就学完了,但如果想要更加深入学习计算机硬件,那么学会寄存器操作是非常有必要的。今天从最简单的点灯开始,我们来对比一下二者的不同。 一、寄存器操作和标准库操作中点亮LED的区别 寄存器操作:…...
如何解决PyQt从主窗口打开新窗口时出现闪退的问题
在PyQt5中,当从主窗口打开新窗口时,经常会出现闪退现象,这通常是由于对象生命周期管理不当或事件循环错误等所导致。 1. 确保新窗口实例被正确引用 新窗口的实例若未被主窗口引用,可能会被Python的垃圾回收机制销毁。 错误示例&…...
2025五一杯数学建模竞赛思路助攻预定
2025五一杯数学建模竞赛思路助攻预定(思路内容见文末名片) 一、概况 数学建模竞赛是一项模拟面对实际问题寻求解决方案的活动,是一次近似 于“真刀真枪”的创新探索性实践训练。在丰富并活跃学生课外生活活动的同 时,数学建模竞…...
Java集合框架解析
一、集合框架概述 1. 集合框架体系结构 Java集合框架(Java Collections Framework, JCF)位于java.util包中,包含三大核心接口: Collection:单列数据集合的根接口 List:有序可重复集合Set:无序…...
《100天精通Python——基础篇 2025 第1天:从编程语言到计算机基础,开启你的学习之旅》
目录 一、计算机组成原理之概述篇二、编程语言是什么三、编译型语言和解释型语言的区别3.1 编译型语言3.2 解释型语言 四、Python是什么五、Python有哪些优点和缺点?5.1 Python的优点5.2 Python 的缺点 六、学Python能干什么,Python的应用领域有哪些&…...
JavaFX 第三篇 HostServices和Platform
1、HostServices类 介绍这个类主要是使用里面的一个方法 返回类型方法说明voidshowDocument(java.lang.String uri)使用默认浏览器打开一个url地址 /*** description: 程序打开3秒后,打开百度* author: HK* since: 2025/4/24 16:40*/ public class Demo1 extends…...
【Java 8新特性】Stream API 和 Lambda 表达式
一、前言 Java 8 的 Stream API 和 Lambda 表达式 为集合处理带来了函数式编程风格,显著简化了代码并提高了可读性。 二、Lambda 表达式 1.作用 简化匿名内部类的语法,允许将函数作为参数传递。实现函数式接口(只有一个抽象方法的接口&…...
Vue 3 相比 Vue 2 的优势
1. 性能优化 更快的渲染: 基于 Proxy 的响应式系统,比 Vue 2 的 Object.defineProperty 更高效,初始化速度和内存占用优化显著。编译时优化(如静态树提升、补丁标志等),减少运行时开销。 更小的体积&#…...
深度解析 TransmittableThreadLocal(TTL):原理、实战与优化指南
深度解析 TransmittableThreadLocal(TTL):原理、实战与优化指南 在现代 Java 应用中,ThreadLocal 被广泛用于线程隔离上下文,比如用户会话、链路追踪等。但随着线程池的普及,ThreadLocal 也暴露出严重局限性,尤其是在异步场景中上下文无法正确传递的问题。 本文从 Thr…...
入门 Go 语言
本专栏的 Go 语言学习参考了B站UP 软件工艺师的视频 本节需要: Go 语言环境VSCode 安装环境 下载 Go 环境,并安装下载 VSCode,安装。在 VSCode 中安装 Go 扩展: 接下来就可以编写 Go 语言了 第一条 Go Go 语言是一种编译型…...
膳食营养诊断活动:科技赋能,共筑全民健康新基石
膳食营养诊断活动:科技赋能,共筑全民健康新基石 一、活动背景:响应营养周号召,开启健康新征程 (一)2025营养周主题解读 2025年全民营养周的核心主题“吃动平衡,健康体重,全民行动…...
考拉悠然:科技与匠心,以烟草虫情AI监测系统共筑品质未来
李工,一位在卷烟厂辛勤耕耘了二十余载的老工艺师,他的青春和汗水,都挥洒在了这片弥漫着烟草香气的土地上。他像一位老农,精心呵护着每一片烟叶,因为他深知,烟草品质的把控,就是守护着卷烟厂的生…...
k8s基于角色的访问控制(RBAC)
Kubernetes(k8s)权限管理主要是基于角色的访问控制(RBAC),以下是其核心内容: 核心概念 Role 和 ClusterRole Role :定义特定命名空间内的权限规则,用于在某个命名空间内设置访问权限…...
拆解华为Pura X新发现:“仿生”散热与钛合金“骨架”
拆解华为Pura X新发现:“仿生”散热与钛合金“骨架” 原创 黑毛警长008 AR圈 2025年04月24日 09:42 广东 01 引言:AI时代带来折叠屏新挑战 随着华为Pura X的发布,市场上已出现多家机构的拆解分析,但大多聚焦于芯片和电子组件层面…...
Typecho 访客统计插件最新版-前后台统计图均可显示
这是一个为 Typecho 博客系统开发的访客统计插件,基于原版的VistorLogger修改版本。该插件提供了详细的访问统计功能,包括访问国家/地区统计、IP分布等信息,并进行了隐私保护处理。 功能特点 独立页面模板显示访问国家/地区统计(…...