首页 > 其他分享 >pinia的使用

pinia的使用

时间:2024-05-26 17:03:44浏览次数:24  
标签:toRefs 解构 pinia 使用 组件 数据 store

 搭建pinia环境

pinia:集中式状态管理工具,用于各组件之间共享数据(多个组件会用到的数据才考虑放到pinia中)

在vue2中使用的是vuex

1.终端输入:npm i pinia

2.

在vue组件中出现pinia

用pinia存储+读取数据

要想好什么组件的什么数据要放入pinia,就是某个组件你希望哪些数据可以和别的组件共享

例:把Count.vue组件的sum、LoveTalk.vue组件的talkList放入pinia

1.在src文件夹下面创建store文件夹(store就是pinia的一个具体体现)

2.在store文件夹下面创建count.ts和loveTalk.ts文件

3.将想要存储到pinia中的数据写进去

3.在组件中导入对应的store并且删除已经放入store中的数据定义,使用store中的数据

4.在网页的pinia组件中就可以看到你创建的store

pinia修改数据的三种方式

修改方法3:当你在actions中添加判断函数之后,所有组件都可以使用这个判断函数,是一种优化,复用的思想

storeToRefs

之前学过toRefs,知道在解构一个响应式对象的一些属性时会让这些属性失去响应式,所以解构的时候要用toRefs包一下

直接解构出来数据就可以在引用数据时清爽一点

原本引用时要 countStore.sum....

解构出来:直接用数据名

但是不能用toRefs来将解构出来的数据变成ref定义的响应式数据,因为这样的话他会把store中的所有数据全部变成ref的,即使是没有用过的数据

要用storeToRefs,这样他只会把数据变成ref的,不会关注方法

标签:toRefs,解构,pinia,使用,组件,数据,store
From: https://blog.csdn.net/weixin_69266073/article/details/139216324

相关文章

  • STM32 F1系列 全中文HAL&LL库使用手册 中英双语对照 GPT机翻 共1208页、约40万字
    STM32F1系列全中文HAL_LL库使用手册,中英文双语对照阅读。内容、格式对照官方原文,含标签导航及目录跳转。全文GPT机翻,除人工翻译外,相对更加贴合原文原意,双语版防止翻译错误方便对照。全文:1208页,约40万字。*******下有更多展示图片********由于本汉化不改变官方文档的内容......
  • 排队免单,买单返现,2+1连动营销小程序源码学习使用下载。
    在当下数字化与智能化高速发展的时代,各类创新型的商业模式层出不穷,其中排队免单系统和买单返现系统便是颇具吸引力的两种商业模式。这两种系统不仅提升了消费者的购物体验,还为企业带来了更多的商业机会和收益。本文将详细解析排队免单系统和买单返现系统的运作原理、优势以......
  • jenkins使用大全
    部署jenkins相关网站Jenkins官网:https://jenkins.io/Jenkins官网文档:https://www.jenkins.io/zh/doc/Jenkins学习文档:https://www.w3cschool.cn/jenkins/jenkins-5h3228n2.htmljenkins安装包:http://mirrors.tuna.tsinghua.edu.cn/jenkins/redhat/OpenJDK:http://jdk.java.net/ja......
  • 使用Golang调用腾讯云邮件模版发送邮件
    文章目录一、腾讯云邮件模版创建1.1发信域名配置1.2发信地址设置1.3发信模版设置二、通过Golang发送邮件2.1代码示例2.2代码说明三、常见问题3.1UnsupportedRegion3.2InvalidTemplateID本文档介绍了如何使用Golang编写代码,通过腾讯云邮件服务(SES)发送带有模......
  • 记录一次Redisson使用synchronized和分布式锁不生效的原因
    最近在开发的过程中,遇到了一个并发场景,用户进行方案复制的时候,当快速点击两次操作的时候,出现了复制方案重名的情况,实际上是复制方案的方案名称,是由后端根据数据库已有的方案名称和当前要复制的方案名称进行逻辑处理,保证方案名称不能重复,比如:要复制的方案名称为“我的方案”,......
  • 网易云音乐插件使用教程,地址:music.163.com
    参看官方教程:点击“生成外链播放器”链接,跳转到选择自己喜欢的播放器风格及尺寸,目前官方支持两个风格勾选是否自动播放。是,别人访问网站时播放器会自动开始播放;否,别人访问网站时播放器需要手动播放音乐......
  • ChatGPT-Next-Web:Github开源+Vercel免费+API 快速部署使用
    ChatGPT-Next-Web:Github开源+Vercel免费+API快速部署使用文章目录ChatGPT-Next-Web:Github开源+Vercel免费+API快速部署使用导语:需要用到的链接汇总1、github项目直达地址2、vercel服务器直达地址3、三方API获取一、Github项目`star`+Vercel部署1、访问进去G......
  • OneForall工具的下载安装和使用(Windows和Linux)
    目录OneForall的介绍OneForall的下载OneForall的安装安装要求安装步骤(git版)安装(kali)OneForall的使用命令在Windows在Linux(kali)OneForall的结果说明免责声明本文所提供的文字和信息仅供学习和研究使用,请读者自觉遵守法律法规,不得利用本文所提供的信息从事任何违......
  • 关于spring中使用 Undertow 作为嵌入式服务器上传文件但是限制的代码不生效问题
    背景:在做毕业设计的时候发现了使用Undertow作为嵌入式服务器上传文件限制的代码不生效,只能上传1MB以内的图片,一旦上传超过1MB的图片就会报错。代码:spring:datasource:hikari:idle-timeout:600000#10minmax-lifetime:1800000#30minservlet......
  • @Async详解,为什么生产环境不推荐直接使用@Async?
    一、@Async注解介绍:@Async注解用于声明一个方法是异步的。当在方法上加上这个注解时,Spring将会在一个新的线程中执行该方法,而不会阻塞原始线程。这对于需要进行一些异步操作的场景非常有用,比如在后台执行一些耗时的任务而不影响前台响应。示例:@ServicepublicclassMySe......