Vue3实战笔记(18)—pinia注意事项和经验总结

文章目录

  • 前言
  • 一、解构的注意事项
  • 二、注意创建和使用顺序
  • 总结


前言

在采用Pinia进行状态管理时,总结了一些关键注意事项与实战经验,旨在优化开发流程并确保高效利用其功能。这包括了正确规划存储结构、充分利用响应式优势、妥善处理模块化以促进代码可维护性,以及重视类型安全和测试策略的实施,以期在Vue应用中实现状态管理的最佳实践。"


一、解构的注意事项

1、请注意,store 是一个用 reactive 包装的对象,这意味着不需要在 getters 后面写 .value。就像 setup 中的 props 一样,我们不能对它进行解构,


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

为了从 store 中提取属性时保持其响应性,你需要使用 storeToRefs()。它将为每一个响应式属性创建引用。当你只使用 store 的状态而不调用任何 action 时,它会非常有用。请注意,你可以直接从 store 中解构 action,因为它们也被绑定到 store 上:


<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>

在使用Pinia进行Vue状态管理时,直接解构store中的state、getters或actions可能会导致响应式丢失。因此,遵循以下注意事项是非常重要的:

避免直接解构state: 如果直接从store中解构state属性,例如 const { count } = useCounterStore(),解构后的变量将不再是响应式的。这意味着Vue无法自动追踪这些变量的变化并触发视图更新。

使用storeToRefs保持响应式: 为了解构state并保持其响应式,你应该使用storeToRefs函数。这个函数来自于pinia库,可以将store的refs转换为普通的ref,从而保持响应式。

区分ref和非ref属性: 使用storeToRefs时,它只会转换store中的ref属性(通常是state),而不会包括actions或非响应式的属性。actions需要单独从store中提取,并且不需要也不应该使用storeToRefs。

在模板中直接访问: 在Vue模板中,你可以直接使用store的属性和方法,它们会被自动追踪,无需担心响应式问题。但在setup脚本中使用解构时,遵循上述规则。

更新逻辑中的使用: 当在方法或计算属性中使用解构的变量时,确保使用.value访问其实际值,因为它们是ref对象。例如:console.log(count.value)。

二、注意创建和使用顺序

Pinia store 依靠 pinia 实例在所有调用中共享同一个 store 实例。大多数时候,只需调用你定义的 useStore() 函数,完全开箱即用。例如,在 setup() 中,你不需要再做任何事情。但在组件之外,情况就有点不同了。实际上,useStore() 给你的 app 自动注入了 pinia 实例。这意味着,如果 pinia 实例不能自动注入,你必须手动提供给 useStore() 函数。你可以根据不同的应用,以不同的方式解决这个问题。

如果你不做任何 SSR(服务器端渲染),在用 app.use(pinia) 安装 pinia 插件后,对 useStore() 的任何调用都会正常执行

import { useUserStore } from '@/stores/user'
import { createApp } from 'vue'
import App from './App.vue'// ❌  失败,因为它是在创建 pinia 之前被调用的
const userStore = useUserStore()const pinia = createPinia()
const app = createApp(App)
app.use(pinia)// ✅ 成功,因为 pinia 实例现在激活了
const userStore = useUserStore()

为确保 pinia 实例被激活,最简单的方法就是将 useStore() 的调用放在 pinia 安装后才会执行的函数中。

让我们来看看这个在 Vue Router 的导航守卫中使用 store 的例子。


import { createRouter } from 'vue-router'
const router = createRouter({// ...
})// ❌ 由于引入顺序的问题,这将失败
const store = useStore()router.beforeEach((to, from, next) => {// 我们想要在这里使用 storeif (store.isLoggedIn) next()else next('/login')
})router.beforeEach((to) => {// ✅ 这样做是可行的,因为路由器是在其被安装之后开始导航的,// 而此时 Pinia 也已经被安装。const store = useStore()if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})

总结

由官方文档而来觉得必须要注意到注意事项,备忘避雷。

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

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

相关文章

Springboot+MybatisPlus如何实现分页和模糊查询

实现分页查询的时候我们需要创建一个config配置类 1、创建MybatisPlusConfig类 Configuration //表明这是一个配置类 ConditionalOnClass(Value{PaginationInterceptor.class} //ConditionalOnClass:当指定的类存在时&#xff0c;才会创建对应的Bean // 这里当PaginationInt…

Go-Zero定义API实战:探索API语法规范与最佳实践(五)

前言 上一篇文章带你实现了Go-Zero模板定制化&#xff0c;本文将继续分享如何使用GO-ZERO进行业务开发。 通过编写API层&#xff0c;我们能够对外进行接口的暴露&#xff0c;因此学习规范的API层编写姿势是很重要的。 通过本文的分享&#xff0c;你将能够学习到Go-Zero的API…

测试项目实战--安享理财2(Jmeter接口测试)

说明&#xff1a; 1.访问地址&#xff1a; 本项目实战使用的是传智播客的安享理财项目&#xff08;找了半天这个项目能免费用且能够满足测试实战需求&#xff09; 前台&#xff1a;http://121.43.169.97:8081/ 后台&#xff1a;http://121.43.169.97:8082/ &#xff08;点赞收藏…

前端工程化 - 快速通关 - vue

目录 npm 2.1环境 2.2命令 2.3使用流程 Vite 3.1简介 3.2实战 Vue3 4.1组件化 4.2SFC 4.3Vue工程 4.4基础使用 4.5进阶用法 4.6总结 npm npm 是 nodejs 中进行 包管理 的工具&#xff1b; 下载&#xff1a;Node.js — Run JavaScript Everywhere 2.1环境 ●安…

KubeKey 部署 K8s v1.28.8 实战

在某些生产环境下&#xff0c;我们仅需要一个原生的 K8s 集群&#xff0c;无需部署 KubeSphere 这样的图形化管理控制台。在我们已有的技术栈里&#xff0c;已经习惯了利用 KubeKey 部署 KubeSphere 和 K8s 集群。今天&#xff0c;我将为大家实战演示如何在 openEuler 22.03 LT…

使用DBeaver的第2天-使用sql导入数据

使用sql导入数据这块我会仔细的说一下 首先位置一定要放在库上&#xff08;实例&#xff09;&#xff0c;放在表上可不好使用哦 然后点击工具-再点击执行脚本 这样就执行成功了 但是如果你执行失败了&#xff0c;多半可能是因为本地没有部署mysql&#xff0c;记住只有本地有…

【IOS】swift新手踩坑总汇

这里写自定义目录标题 ESTabBarController_swiftQMUIKit ESTabBarController_swift Exception NSException * "调用了 pushViewController 但实际上没 push 成功&#xff0c;viewController&#xff1a;<HuangShan.ViewControllers: 0x106832a00>; superclass: EST…

【强训笔记】day23

NO.1 思路&#xff1a;直接计算结果&#xff0c;先计算怪物可以抗几次攻击&#xff0c;再计算勇士受到的伤害&#xff0c;如果勇士的攻击力大于等于怪物的血量&#xff0c;那么就可以击杀无数只&#xff0c;如果勇士的血量正好是受到攻击的整数倍&#xff0c;那么击杀的怪物数…

前端项目的准备工作

1.下载less或sass&#xff08;如果使用的话&#xff09; pnpm i -D less | pnpm i -D sass &#xff08;-D: 这是一个选项或标志&#xff0c;表示安装的软件包将被添加为开发依赖项&#xff08;devDependencies&#xff09;。开发依赖项是指在开发过程中需要使用的工具…

【信息系统项目管理师知识点速记】风险管理:实施风险应对

实施风险应对是确保项目风险管理计划得以执行的关键步骤,旨在通过监控和执行预先设定的策略来减轻威胁、抓住机遇,以及维持项目目标的一致性。此过程概括如下: 目标: 确保风险应对计划的执行。最小化单个风险的负面影响。最大化利用单个风险带来的机会。持续管理项目范围内…

web agent 学习 3:screen ai

学习论文&#xff1a;ScreenAI: A Vision-Language Model for UI and Infographics Understanding 摘要部分介绍了作者的screenai&#xff0c;是一个专门用于UI和信息图形理解的视觉语言模型。模型利用pix2struct灵活的补丁策略改进了PaLI架构&#xff0c;并在独特的数据集混合…

ubuntu编译pcl时报错

报错如下 cc1plus: warning: -Wabi wont warn about anything [-Wabi] cc1plus: note: -Wabi warns about differences from the most up-to-date ABI, which is also used by default cc1plus: note: use e.g. -Wabi11 to warn about changes from GCC 7 在网上找到了一封邮件…

国外新闻媒体投放:多元化媒体分发投稿平台-大舍传媒

引言 随着全球信息传播的加速和全球化的发展&#xff0c;国外新闻媒体的推广变得越来越重要。在这个数字化时代&#xff0c;多元化的媒体分发投放成为了有效推广的关键。本文将介绍大舍传媒在国外新闻媒体推广中的经验与策略。 国外新闻媒体的重要性 国外新闻媒体是获取国际…

insert语句的锁

insert … select 语句 CREATE TABLE t (id int(11) NOT NULL AUTO_INCREMENT,c int(11) DEFAULT NULL,d int(11) DEFAULT NULL,PRIMARY KEY (id),UNIQUE KEY c (c) ) ENGINEInnoDB;insert into t values (null, 1, 1); insert into t values (null, 2, 2); insert into t v…

网页转长图插件html2canvas【前端】

网页转长图插件html2canvas【前端】 前言版权开源推荐网页转长图插件html2canvas【前端】wkImageStorage流程使用后端application.propertiesWkConfigShareControllerImageCleanupTask 前端html2canvas.jsshare.htmlshare.jsgetShare.jsgetShare.html 最后 前言 2024-5-10 18:…

超分辨率重建——CAMixerSR网络训练与推理测试(详细图文教程)

&#x1f4aa; 专业从事且热爱图像处理&#xff0c;图像处理专栏更新如下&#x1f447;&#xff1a; &#x1f4dd;《图像去噪》 &#x1f4dd;《超分辨率重建》 &#x1f4dd;《语义分割》 &#x1f4dd;《风格迁移》 &#x1f4dd;《目标检测》 &#x1f4dd;《暗光增强》 &a…

iOS Swift 中使用 ReplayKit 进行屏幕录制并获取文件路径

在 iOS 开发中&#xff0c;屏幕录制是一项强大的功能&#xff0c;尤其在应用演示、教育教程或游戏录屏等场景中非常有用。Apple 提供了一个名为 ReplayKit 的框架&#xff0c;允许开发者直接在应用中添加屏幕录制功能。本文将详细介绍如何使用 Swift 和 ReplayKit 结合 AVFound…

在做题中学习(56):二维前缀和模板

【模板】二维前缀和_牛客题霸_牛客网 (nowcoder.com) 理解题意&#xff1a; 要求的是(x1,y1) - (x2,y2)这段区间的和。 解法&#xff1a;二维前缀和 1. 和一维前缀和一样&#xff0c;需要有一个同等规模的dp数组&#xff0c;用来保存一段连续区域的和。 在二维dp中&#xff0…

客户案例:CACTER云网关为企业O365系统提供安全新护盾

一、客户背景 某智能驾驶企业是一家国际性的高科技创新型企业&#xff0c;其智能驾驶领域处于全球领先地位&#xff0c;专注于为广大客户提供个性化的智能驾驶解决方案&#xff0c;共建美好智能新时代。 使用产品&#xff1a;CACTER邮件安全云网关 二、痛点难点问题 根据…

最强特征点检测算法 DeDoDe v1/v2

论文地址v1:https://arxiv.org/pdf/2308.08479 论文地址v1:https://arxiv.org/pdf/2404.08928 代码地址:GitHub - Parskatt/DeDoDe: [3DV 2024 Oral] DeDoDe 🎶 Detect, Dont Describe --- Describe, Dont Detect, for Local Feature Matching 实测确实牛X! DeDoDeV1 关…