Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式

更新時(shí)間：2024年05月08日 10:21:48 作者：NorthCastle

這篇文章主要介紹了Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用說(shuō)明

在 Pinia 中，獲取狀態(tài)變量的方式非常的簡(jiǎn)單：就和使用對(duì)象一樣。

使用思路：

1、導(dǎo)入Store
2、聲明Store對(duì)象
3、使用對(duì)象

在邏輯代碼中使用

但是 Option Store 和 Setup Store 兩種方式定義的全局狀態(tài)變量在獲取的時(shí)候還是有簡(jiǎn)單的區(qū)別的：

Option Store : 聲明Store對(duì)象之后，可以直接使用屬性，例如：【store.name】
Setup Store : 聲明Store對(duì)象之后，可以獲取到定義的聲明式對(duì)象，所以使用具體屬性時(shí)需要通過(guò) 該對(duì)象，例如：【store.student.name】

在html模板中使用

此處非常的簡(jiǎn)單，Store對(duì)象中有一個(gè)$state 屬性，這個(gè)屬性就是我們定義的全局狀態(tài)變量。

下面通過(guò)具體的案例體會(huì)一下。

具體案例

本案例有一個(gè)全局狀態(tài)變量的配置文件，分別通過(guò) Option Store 和 Setup Store 兩種方式定義了兩個(gè)全局狀態(tài)變量；

在組件A 中導(dǎo)入兩個(gè)全局狀態(tài)變量，并分別在控制臺(tái) 和頁(yè)面模板中讀取展示一下;

在 App.vue 文件中存在 <router-view> 標(biāo)簽用于組件的路由。

全局狀態(tài)變量配置文件

// 導(dǎo)入 defineStore API
import { defineStore } from 'pinia'

// 導(dǎo)入 reactive 依賴
import { reactive } from 'vue'

// 定義全局狀態(tài)方式一 ： option store
export const useClassStore = defineStore('classinfo',{

    state: () => ({
        name:'快樂(lè)籃球二班',
        studentNum:30
    })

})

// 定義全局狀態(tài)方式二 ： setup store
export const useStudentStore = defineStore('studentinfo',() => {

    // 響應(yīng)式狀態(tài) ： student 是響應(yīng)式對(duì)象
    const student =  reactive({
        name : '小明',
        age:12,
        className:'快樂(lè)足球一班'
    })

    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'
    // 聲明父組件的一個(gè)變量
    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 來(lái)讀取全局狀態(tài)變量 -->
        classStore : {{ classStore.$state }}
        <br>
        studentStore :  {{ studentStore.$state }}
     
    </div>
    
</template>

<script setup lang="ts">

    // 導(dǎo)入全局狀態(tài)變量的定義
    import  { useClassStore,useStudentStore }  from './storea'

    // 獲取全局狀態(tài)變量的對(duì)象
    const classStore = useClassStore()
    const studentStore = useStudentStore()

    // 讀取一下全局的變量
    console.log('組件A 中 ： ',classStore)
    console.log('組件A 中 ： ',studentStore)
	
	// Option Store 的方式 ： 直接可以獲取到屬性
    console.log('組件A 中 classinfo 對(duì)象 ： ',classStore.name+' - '+classStore.studentNum)
    // Setup Store 的方式 ： 仍然需要通過(guò) 定義的 student 對(duì)象，因?yàn)檫@個(gè)student 是真正的全局狀態(tài)對(duì)象
    console.log('組件A 中 studentinfo 數(shù)據(jù)對(duì)象： ',studentStore.student.name+'-'+studentStore.student.age+'-'+studentStore.student.className)

    console.log('------')
 
  
</script>

<style scoped>
    .diva{
        width: 450px;
        height: 250px;
        background: red;
    }
</style>