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将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

springboot security之前后端分离配置方式

《springbootsecurity之前后端分离配置方式》:本文主要介绍springbootsecurity之前后端分离配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录前言自定义配置认证失败自定义处理登录相关接口匿名访问前置文章总结前言spring boot secu