快捷導(dǎo)航

Pinia中action使用方法詳解

更新時間：2023年04月03日 08:50:40 作者：大鯉余

Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

actions的使用

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

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

在actions中可以通過this訪問該倉庫所有實例

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)前倉庫實例,就是myTestStore

args是actions中某個被調(diào)用函數(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)文章希望大家以后多多支持腳本之家！