Pinia中action如何使用

這篇文章主要介紹“Pinia中action如何使用”，在日常操作中，相信很多人在Pinia中action如何使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Pinia中action如何使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

actions的使用

動(dòng)作相當(dāng)于組件中的方法。它們可以使用actionsin 屬性進(jìn)行定義。

并且在pinia中的action既可以有同步函數(shù)也可以有異步函數(shù)。

在actions中可以通過(guò)this訪問(wèn)該倉(cāng)庫(kù)所有實(shí)例

export const useUsers = defineStore('users',{
	state:()=>{
		userData:null
	},
	actions:{
		async registerUser(login,password){
			...
			this.userData = 1
		}
	}
})

在setup中可以直接使用actions中的函數(shù)，pinia會(huì)自動(dòng)推斷

<script setup>
	import { useUsers } from '...'
	const store = useUsers()
	store.registerUser()//可以直接調(diào)用

</script>

訂閱$onAction

訂閱操作默認(rèn)情況下綁定到添加他的組件。這就意味著當(dāng)組件卸載，訂閱會(huì)自動(dòng)被刪除，但如果第二個(gè)參數(shù)傳遞為true則會(huì)將該訂閱與組件分離。（即組件卸載該訂閱依然存在）

$onAction的基本使用

//新建一個(gè)測(cè)試倉(cāng)庫(kù)
import { defineStore } from 'pinia'
export const testStore = defineStore('test', {
    state() {
        return {
            count:1
        }
    },
    actions: {
        testOnAction(id) {
            this.count++
            console.log(this.count)
            return Promise.resolve('這是testOnAction返回的值')
        },
        testOnAction2(...args) {
            console.log(...args)
            return Promise.reject('這是testOnAction222錯(cuò)誤返回的值')
        }

    }
})
//在setup的語(yǔ)法糖里
import { testStore } from '../../pinia/modules/test'
const myTestStore = testStore()

store.$onAction(({
  name,
  store,
  args,
  after,
  onError
})=>{
	if(name==='testOnAction'){
		after((reject)=>{
			//這里可以執(zhí)行一些操作
		})
	}
	//onError鉤子類似一個(gè)錯(cuò)誤級(jí)中間件，當(dāng)函數(shù)拋出promise的失敗狀態(tài)就會(huì)調(diào)用
  onError((error)=>{
    console.log(error)
  })
})
store.testOnAction(1)
store.testOnAction2(1,2,3,45)

詳解$onAction中的參數(shù)

({ name,store, args,after, onError }）

$onAction函數(shù)接受一個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)內(nèi)部的代碼會(huì)先于actions函數(shù)調(diào)用前執(zhí)行，以下是$onAction中回調(diào)函數(shù)的參數(shù)介紹。

name當(dāng)該倉(cāng)庫(kù)中的某個(gè)actions函數(shù)被調(diào)用，name是被調(diào)用函數(shù)的名字。

store是當(dāng)前倉(cāng)庫(kù)實(shí)例,就是myTestStore

args是actions中某個(gè)被調(diào)用函數(shù)接受的實(shí)參，是個(gè)數(shù)組類型

after是個(gè)鉤子函數(shù)，內(nèi)部接受要給回調(diào)函數(shù)，該回調(diào)函數(shù)接受一個(gè)參數(shù)result，當(dāng)actions中的函數(shù)返回了一個(gè)promise成功的返回值，result可以接受到，如果actions里的函數(shù)沒(méi)有返回值則result則為undefined。after鉤子函數(shù)會(huì)在actions中的函數(shù)被調(diào)用后執(zhí)行

onError是個(gè)鉤子函數(shù)，如果做過(guò)服務(wù)端的小伙伴肯定知道錯(cuò)誤級(jí)中間件，onError同樣接受一個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)接受一個(gè)error參數(shù)，該參數(shù)是actions內(nèi)部函數(shù)中返回promise失敗傳的參數(shù)。如果actions內(nèi)部函數(shù)返回了promise失敗狀態(tài)onError就會(huì)執(zhí)行

到此，關(guān)于“Pinia中action如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！