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

本文主要是介绍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>

运行结果

在这里插入图片描述

这篇关于Vue3-46-Pinia-获取全局状态变量的方式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/593003

相关文章

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

JAVA保证HashMap线程安全的几种方式

《JAVA保证HashMap线程安全的几种方式》HashMap是线程不安全的,这意味着如果多个线程并发地访问和修改同一个HashMap实例,可能会导致数据不一致和其他线程安全问题,本文主要介绍了JAV... 目录1. 使用 Collections.synchronizedMap2. 使用 Concurren

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab