Pinia中action使用方法詳解
actions的使用
動作相當(dāng)于組件中的方法。它們可以使用actionsin 屬性進(jìn)行定義。
并且在pinia中的action既可以有同步函數(shù)也可以有異步函數(shù)。
在actions中可以通過this訪問該倉庫所有實(shí)例
export const useUsers = defineStore('users',{
state:()=>{
userData:null
},
actions:{
async registerUser(login,password){
...
this.userData = 1
}
}
})
在setup中可以直接使用actions中的函數(shù),pinia會自動推斷
<script setup>
import { useUsers } from '...'
const store = useUsers()
store.registerUser()//可以直接調(diào)用
</script>
訂閱$onAction
訂閱操作默認(rèn)情況下綁定到添加他的組件。這就意味著當(dāng)組件卸載,訂閱會自動被刪除,但如果第二個參數(shù)傳遞為true則會將該訂閱與組件分離。(即組件卸載該訂閱依然存在)
$onAction的基本使用
//新建一個測試倉庫
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錯誤返回的值')
}
}
})
//在setup的語法糖里
import { testStore } from '../../pinia/modules/test'
const myTestStore = testStore()
store.$onAction(({
name,
store,
args,
after,
onError
})=>{
if(name==='testOnAction'){
after((reject)=>{
//這里可以執(zhí)行一些操作
})
}
//onError鉤子類似一個錯誤級中間件,當(dāng)函數(shù)拋出promise的失敗狀態(tài)就會調(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ù)接受一個回調(diào)函數(shù),該回調(diào)函數(shù)內(nèi)部的代碼會先于actions函數(shù)調(diào)用前執(zhí)行,以下是$onAction中回調(diào)函數(shù)的參數(shù)介紹。
name當(dāng)該倉庫中的某個actions函數(shù)被調(diào)用,name是被調(diào)用函數(shù)的名字。
store是當(dāng)前倉庫實(shí)例,就是myTestStore
args是actions中某個被調(diào)用函數(shù)接受的實(shí)參,是個數(shù)組類型
after是個鉤子函數(shù),內(nèi)部接受要給回調(diào)函數(shù),該回調(diào)函數(shù)接受一個參數(shù)result,當(dāng)actions中的函數(shù)返回了一個promise成功的返回值,result可以接受到,如果actions里的函數(shù)沒有返回值則result則為undefined。after鉤子函數(shù)會在actions中的函數(shù)被調(diào)用后執(zhí)行
onError是個鉤子函數(shù),如果做過服務(wù)端的小伙伴肯定知道錯誤級中間件,onError同樣接受一個回調(diào)函數(shù),該回調(diào)函數(shù)接受一個error參數(shù),該參數(shù)是actions內(nèi)部函數(shù)中返回promise失敗傳的參數(shù)。如果actions內(nèi)部函數(shù)返回了promise失敗狀態(tài)onError就會執(zhí)行
總結(jié)
以上就是$onAction函數(shù),對于$函數(shù)就相當(dāng)于一個監(jiān)聽器,功能類似與watch當(dāng)actions內(nèi)部函數(shù)被調(diào)用就會觸發(fā)。我們可以在某個函數(shù)調(diào)用前做一些操作,調(diào)用后執(zhí)行某些操作,以及函數(shù)中拋出的錯誤進(jìn)行操作。
到此這篇關(guān)于Pinia中action使用方法的文章就介紹到這了,更多相關(guān)Pinia中action使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目啟動后沒有局域網(wǎng)地址問題
這篇文章主要介紹了vue項(xiàng)目啟動后沒有局域網(wǎng)地址問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
vue中設(shè)置echarts寬度自適應(yīng)的代碼步驟
這篇文章主要介紹了vue中設(shè)置echarts寬度自適應(yīng)的問題及解決方案,常常需要做到echarts圖表的自適應(yīng),一般是根據(jù)頁面的寬度做對應(yīng)的適應(yīng),本文記錄一下設(shè)置echarts圖表的自適應(yīng)的步驟,需要的朋友可以參考下2022-09-09
vue使用keep-alive后從部分頁面進(jìn)入不緩存示例詳解
這篇文章主要給大家介紹了關(guān)于vue使用keep-alive后從部分頁面進(jìn)入不緩存的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-03-03

