Vue3-46-Pinia-获取全局状态变量的方式

使用说明

在 Pinia 中,获取状态变量的方式非常的简单 : 就和使用对象一样。
使用思路 : 1、导入Store;2、声明Store对象;3、使用对象。

在逻辑代码中使用

但是 Option StoreSetup Store 两种方式定义的全局状态变量在获取的时候还是有简单的区别的:
Option Store : 声明Store对象之后,可以直接使用属性,例如 : 【store.name】
Setup Store : 声明Store对象之后,可以获取到定义的声明式对象,所以使用具体属性时需要通过 该对象,例如 : 【store.student.name】

在html模板中使用

此处非常的简单,Store对象中有一个$state 属性,这个属性就是我们定义的全局状态变量。

下面通过具体的案例体会一下。

具体案例

本案例 有一个全局状态变量的 配置文件,分别通过 Option StoreSetup Store 两种方式定义了两个全局状态变量;
在组件A 中 导入两个全局状态变量,并分别在控制台 和 页面模板中读取展示一下;
在 App.vue 文件中 存在 <router-view> 标签用于组件的路由。

全局状态变量配置文件

// 导入 defineStore API
import { defineStore } from 'pinia'// 导入 reactive 依赖
import { reactive } from 'vue'// 定义全局状态方式一 : option store
export const useClassStore = defineStore('classinfo',{state: () => ({name:'快乐篮球二班',studentNum:30})})// 定义全局状态方式二 : setup store
export const useStudentStore = defineStore('studentinfo',() => {// 响应式状态 : student 是响应式对象const student =  reactive({name : '小明',age:12,className:'快乐足球一班'})return { student }})

App.vue 组件

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br><br><!-- 组件放在这里 --><router-view></router-view></div></template><script setup lang="ts">// 引入 provide 方法import { ref } from 'vue'// 声明父组件的一个变量const msg = ref('这是App根组件的msg变量')</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

组件A 的代码

<template><div class="diva">这是组件A<br><br><!-- 使用 $state 来读取全局状态变量 -->classStore : {{ classStore.$state }}<br>studentStore :  {{ studentStore.$state }}</div></template><script setup lang="ts">// 导入全局状态变量的定义import  { useClassStore,useStudentStore }  from './storea'// 获取全局状态变量的对象const classStore = useClassStore()const studentStore = useStudentStore()// 读取一下全局的变量console.log('组件A 中 : ',classStore)console.log('组件A 中 : ',studentStore)// Option Store 的方式 : 直接可以获取到属性console.log('组件A 中 classinfo 对象 : ',classStore.name+' - '+classStore.studentNum)// Setup Store 的方式 : 仍然需要通过 定义的 student 对象,因为这个student 是真正的全局状态对象console.log('组件A 中 studentinfo 数据对象: ',studentStore.student.name+'-'+studentStore.student.age+'-'+studentStore.student.className)console.log('------')</script><style scoped>.diva{width: 450px;height: 250px;background: red;}
</style>

运行结果

在这里插入图片描述

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

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

相关文章

全新小白菜QQ云端机器人登录系统源码 /去除解密授权学习版源码

源码介绍&#xff1a; 全新小白菜QQ云端机器人登录系统源码&#xff0c;是一款经过全面解密的授权学习版源码。 这款源码已解除了授权版的限制&#xff0c;然而许多人可能对其用途并不了解。实际上&#xff0c;该源码主要面向群机器人爱好者设计。它是一个基于挂机宝机器人框…

RT-DETR算法优化改进:多层次特征融合(SDI)结合PConv、DualConv、GSConv,实现二次创新 | UNet v2最新论文

💡💡💡本文独家改进:多层次特征融合(SDI)高效结合DualConv、PConv、GSConv等实现二次创新 1)替代原始的Concat; RT-DETR魔术师专栏介绍: https://blog.csdn.net/m0_63774211/category_12497375.html ✨✨✨魔改创新RT-DETR 🚀🚀🚀引入前沿顶会创新(CVPR…

Java期末复习题库(封装,继承,抽象类,接口,GUI)

包与字符串 1.创建包的基本操作 在biology包中的animal包中有human类,它具有name,height,weight的属性,还具有eat(),sleep()和work()的行为,在biology包中的plant包中有flower类,它具有name,color,smell的属性,还具有drink()和blossom()的行为. 现在在一个school包中的garde…

优雅处理并发:Java CompletableFuture最佳实践

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;今天&#xff0c;小黑要和大家聊聊CompletableFuture&#xff0c;这个Java 8引入的强大工具。 在Java传统的Future模式里&#xff0c;咱们都知道&#xff0c;一旦开始了一个异步操作&#xff0c;就只能等它结束…

26.9K Star,漫画阅读 APP 开源了

今天推荐是一款适用于 Android 6.0 及更高版本的免费开源漫画阅读器&#xff0c;基于 Kotlin 开发的。这款 APP 完全免费、好用、无广告&#xff0c;自带上千个全球漫画源&#xff0c;在线阅读和下载都很方便&#xff0c;是漫画爱好者必备&#xff01; 它以插件的形式提供了来自…

【我想开发一个小程序,大概需要多少钱?】

小程序开发为什么报价差距很大&#xff1f;主要是因为小程序的实现方法和功能模型不同。 小程序的实现方法&#xff1a; 实现方法主要分为SAAS小程序、定制小程序和第三方平台小程序。不同的实现方法价格都是不一样的&#xff0c;大概的区间如下&#xff1a; SAAS小程序和第三…

Zapier/Make.com/数环通/集简云的对比

Zapier/Make.com/数环通/集简云 这四家公司都是为了自动化&#xff0c;这也是流行大趋势。我不想错过未来的大趋势&#xff0c;花了2周时间分别用四家公司的模块实现了相同的任务。 为什么会用2周时间&#xff1f;我第一次接触无代码自动化。最重要的目的是为了白嫖&#xff0…

office办公技能|word中的常见通配符使用

一、删除Word中含有指定内容的整行 操作方法&#xff1a; 1、快捷键 CtrlH&#xff0c;打开Word的查找替换窗口&#xff0c;单击【更多】按钮&#xff0c;勾选“使用通配符”。 2、在查找内容处&#xff0c;输入“替换内容*^13”&#xff0c;替换为处什么都不填。 3、单击【…

Harbor离线安装

下载安装包 $ wget https://github.com/goharbor/harbor/releases/download/v2.7.4/harbor-offline-installer-v2.7.4.tgz解压 $ tar xvf harbor-offline-installer-v2.7.4.tgz -C /usr/local修改配置 $ cd /usr/local/harbor $ cp harbor.yml.tmpl harbor.yml $ vim harbo…

【文献解读】“MOBILEViT:轻量级、通用目的、移动友好的视觉变换器”。

今天阅读这篇2022年ICLR会议上发表的论文&#xff0c;主要是为了学习MobileViT模型&#xff0c;用于YOLO模型主干改造。 一、文献概述 作者&#xff1a;Sachin Mehta 和 Mohammad Rastegari。地点&#xff1a;作者所属机构是 Apple。内容简述&#xff1a; 提出了一种名为Mob…

手把手Docker部署Gitblit服务器

1拉取镜像 docker pull jacekkow/gitblit:v1.9.1 2.启动 docker run -d --name gitblit --restart always -p 10006:8080 -p 18443:8443 -p 19418:9418 -p 29418:29418 -v /data/gitblit/data:/opt/gitblit-data jacekkow/gitblit:v1.9.1 3.查看 默认账户/密码:admin/adm…

安卓手机变iOS!

Launcher iOS 16 - 安卓手机秒变iOS Launcher iOS 16 是一款iOS启动器&#xff0c;可以将安卓手机桌面变成iOS样子&#xff0c;还有iOS的开机动画和景深效果&#xff01; 下载链接&#xff1a;【Launcher iOS 16】 ​

腾讯云优惠券介绍、种类、领取入口及使用教程

腾讯云作为国内领先的云服务提供商&#xff0c;为广大的企业和开发者提供了优质的云计算、大数据、人工智能等服务。为了更好地吸引用户&#xff0c;腾讯云推出了多种优惠活动&#xff0c;其中就包括腾讯云优惠券。本文将详细介绍腾讯云的优惠券种类、领取入口以及使用教程。 一…

第 4 章 链表

文章目录 4.1 链表(Linked List)介绍4.2 单链表的应用实例4.3 单链表面试题(新浪、百度、腾讯)4.4 双向链表应用实例4.4.1 双向链表的操作分析和实现4.4.2 课堂作业和思路提示 4.5 单向环形链表应用场景4.6 单向环形链表介绍4.7 Josephu 问题4.8 Josephu 问题的代码实现 4.1 链…

习题5-1 代码对齐(Alignment of Code, ACM/ICPC NEERC 2010, UVa1593)

输入若干行代码&#xff0c;要求各列单词的左边界对齐且尽量靠左。单词之间至少要空一格。每个单词不超过80个字符&#xff0c;每行不超过180个字符&#xff0c;一共最多1000行&#xff0c;样例输入与输出如图所示。 //代码对齐 //思路&#xff1a;统计每列最长的单词 不够长…

LeetCode 0083.删除排序链表中的重复元素:模拟

【LetMeFly】83.删除排序链表中的重复元素&#xff1a;模拟 力扣题目链接&#xff1a;https://leetcode.cn/problems/remove-duplicates-from-sorted-list/ 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的…

docker-compose部署kafka、SASL模式(密码校验模式)

一.基础kafka部署 zookeeper&#xff0c;kafka&#xff0c;kafka-ui docker-compose.yml 注意点&#xff1a;192.168.1.20 是宿主机的ip version: "3" services:zookeeper:image: wurstmeister/zookeepercontainer_name: zookeeperrestart: alwaysports:- 2181:2…

Java判断字符串当中是否有中文符号(不是中文名称,是符号)

public static void main(String[] args) throws ParseException, IOException, URISyntaxException {// 测试示例String testString1 "Hello,test&#xff01;";String testString2 "This is a test.";boolean result1 containsChineseSymbols(testStr…

第一次开发基于SpringBoot的Java应用

第一次开发基于SpringBoot的Java应用 一、 方式1&#xff1a;IDEA创建New Project Spring Boot官方文档的Getting Started1、IDEA创建New Project2、Spring Boot官方文档的Getting Started2.1 Creating the POM &#xff08;实际是&#xff0c;更新pom.xml&#xff09;2.2 Add…

【GitHub项目推荐--学算法】【转载】

不想做低级码农&#xff0c;不想成为前端抠图达人或是后台「增删改查」小王子&#xff1f;那你可能需要好好复习下算法与数据结构。 想成为算法工程师&#xff0c;基础知识是绕不开的大山。这次要推荐的项目是数据结构与算法的开源项目集&#xff0c;覆盖多种主流语言&#xff…