Vue3 Pinia如何修改全局狀態(tài)變量值

更新時(shí)間：2024年05月08日 09:28:42 作者：NorthCastle

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

說明

修改全局狀態(tài)變量的值，是一個(gè)比較常規(guī)而且常見的操作。

本文就介紹四種常見的操作。

由于Option Store 和Setup Store 在修改的時(shí)候略有不同，所以本文也會(huì)將不同點(diǎn)體現(xiàn)一下。

全局狀態(tài)變量的定義

包含了 Option Store 和Setup Store 兩種定義方式；

在下面的修改操作中會(huì)根據(jù)這兩種不同的定義來分別闡述。

// 導(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:'快樂籃球二班',
        studentNum:30
    }),

    actions:{
      // 用來更新狀態(tài)的值
      updateName(){
        this.name = '使用actions修改的name'
      }
    }


})

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

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


    // 直接定義一個(gè)方法進(jìn)行數(shù)據(jù)屬性的修改
    const updateName = (nameP:string)=>{
        student.name = nameP
    }


    return { student,updateName }

})

方式一：直接修改

直接修改：就是直接讀取對(duì)象進(jìn)行變量值的替換。

Option Store

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

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

    // 方式一 ： 直接修改
   classStore.studentNum = 36

Setup Store

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

    // 獲取全局狀態(tài)變量的對(duì)象
    const studentStore = useStudentStore()
    
    // 方式一 ： 直接修改
    studentStore.student.className = '我也不知道是哪個(gè)班的'

方式二：$patch 方式修改

參數(shù)是一個(gè)對(duì)象的形式

Option Store

直接放入【參數(shù)對(duì)象】： {key:value} 就OK了

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

    // 獲取全局狀態(tài)變量的對(duì)象
    const classStore = useClassStore()
    
  	// 方式二 ： $patch 方法修改
    classStore.$patch({studentNum:20})

Setup Store

由于狀態(tài)變量在定義的時(shí)候，就是一個(gè)響應(yīng)式對(duì)象，所以需要把整個(gè)的對(duì)象都放進(jìn)去才OK。

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

    // 獲取全局狀態(tài)變量的對(duì)象
    const studentStore = useStudentStore()
    
    // 方式二 ： $patch 方法修改
    studentStore.$patch({student:{
            name: studentStore.student.name,
            age: studentStore.student.age,
            className:'又換了一個(gè)班級(jí)'
    }})

方式三：$patch 帶參數(shù)的方式修改

參數(shù)是 函數(shù)的形式，且函數(shù)的參數(shù)就是 原state對(duì)象

這種方式用起來比【方式二】要更加靈活。

Option Store

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

    // 獲取全局狀態(tài)變量的對(duì)象
    const classStore = useClassStore()
    
   // 方式三 ：$patch + 函數(shù)參數(shù)的方法修改 : 函數(shù)的參數(shù)就是 狀態(tài)對(duì)象
   classStore.$patch((state)=>{
           console.log(state)
           state.studentNum = 100
   })

Setup Store

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

    // 獲取全局狀態(tài)變量的對(duì)象
    const studentStore = useStudentStore()
    
    // 方式三 ：$patch + 函數(shù)參數(shù)的方法修改 : 函數(shù)的參數(shù)就是 狀態(tài)對(duì)象
    studentStore.$patch((state)=>{
         console.log(state)
         state.student.className = '超級(jí)無敵快樂踢足球的班'
    })

方式四：actions方法的方式進(jìn)行修改

這種方式比較好理解，就是通過調(diào)用已經(jīng)定義好的方法的方式來進(jìn)行變量值的修改。

也比較推薦使用這一種方式。

Option Store

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

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

 	// 方式四 ：actions 方法的方式進(jìn)行數(shù)據(jù)的修改
    classStore.updateName()

Setup Store

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

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

    // 方式四 ：actions 方法的方式進(jìn)行數(shù)據(jù)的修改
    studentStore.updateName('小紅')