Vue3 Pinia获取全局状态变量的实现方式
作者：NorthCastle
这篇文章主要介绍了Vue3 Pinia获取全局状态变量的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用说明
在 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>
运行结果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。