Vue3 Pinia获取全局状态变量的实现方式_Vue.js

使用说明

在 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>