做企业网站 排名新开传奇网站合击

使用说明

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

在逻辑代码中使用

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

在html模板中使用

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

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

具体案例

本案例 有一个全局状态变量的 配置文件，分别通过 Option Store 和 Setup 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>

运行结果