Pinia Action

Action 相當(dāng)于組件中的 method。它們可以通過 defineStore() 中的 actions 屬性來定義，并且它們也是定義業(yè)務(wù)邏輯的完美選擇。

export const useCounterStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    randomizeCounter() {
      this.count = Math.round(100 * Math.random())
    },
  },
})

類似 getter，action 也可通過 this 訪問整個 store 實(shí)例，并支持完整的類型標(biāo)注(以及自動補(bǔ)全?)。不同的是，action 可以是異步的，你可以在它們里面 await 調(diào)用任何 API，以及其他 action！下面是一個使用 Mande 的例子。請注意，你使用什么庫并不重要，只要你得到的是一個Promise，你甚至可以 (在瀏覽器中) 使用原生 fetch 函數(shù)：

import { mande } from 'mande'
const api = mande('/api/users')
export const useUsers = defineStore('users', {
  state: () => ({
    userData: null,
    // ...
  }),
  actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // 讓表單組件顯示錯誤
        return error
      }
    },
  },
})

你也完全可以自由地設(shè)置任何你想要的參數(shù)以及返回任何結(jié)果。當(dāng)調(diào)用 action 時，一切類型也都是可以被自動推斷出來的。

Action 可以像函數(shù)或者通常意義上的方法一樣被調(diào)用：

<script setup>
const store = useCounterStore()
// 將 action 作為 store 的方法進(jìn)行調(diào)用
store.randomizeCounter()
</script>
<template>
  <!-- 即使在模板中也可以 -->
  <button @click="store.randomizeCounter()">Randomize</button>
</template>

訪問其他 store 的 action

想要使用另一個 store 的話，那你直接在 action 中調(diào)用就好了：

import { useAuthStore } from './auth-store'
export const useSettingsStore = defineStore('settings', {
  state: () => ({
    preferences: null,
    // ...
  }),
  actions: {
    async fetchUserPreferences() {
      const auth = useAuthStore()
      if (auth.isAuthenticated) {
        this.preferences = await fetchPreferences()
      } else {
        throw new Error('User must be authenticated')
      }
    },
  },
})

使用選項(xiàng)式 API 的用法

在下面的例子中，你可以假設(shè)相關(guān)的 store 已經(jīng)創(chuàng)建了：

// 示例文件路徑：
// ./src/stores/counter.js
import { defineStore } from 'pinia'
const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

使用 setup()

雖然并不是每個開發(fā)者都會使用組合式 API，但 setup() 鉤子依舊可以使 Pinia 在選項(xiàng)式 API 中更易用。并且不需要額外的映射輔助函數(shù)!

<script>
import { useCounterStore } from '../stores/counter'
export default defineComponent({
  setup() {
    const counterStore = useCounterStore()
    return { counterStore }
  },
  methods: {
    incrementAndPrint() {
      this.counterStore.increment()
      console.log('New Count:', this.counterStore.count)
    },
  },
})
</script>

不使用 setup()

如果你不喜歡使用組合式 API，你也可以使用 mapActions() 輔助函數(shù)將 action 屬性映射為你組件中的方法。

import { mapActions } from 'pinia'
import { useCounterStore } from '../stores/counter'
export default {
  methods: {
    // 訪問組件內(nèi)的 this.increment()
    // 與從 store.increment() 調(diào)用相同
    ...mapActions(useCounterStore, ['increment'])
    // 與上述相同，但將其注冊為this.myOwnName()
    ...mapActions(useCounterStore, { myOwnName: 'increment' }),
  },
}

訂閱 action

你可以通過 store.$onAction() 來監(jiān)聽 action 和它們的結(jié)果。傳遞給它的回調(diào)函數(shù)會在 action 本身之前執(zhí)行。after 表示在 promise 解決之后，允許你在 action 解決后執(zhí)行一個回調(diào)函數(shù)。同樣地，onError 允許你在 action 拋出錯誤或 reject 時執(zhí)行一個回調(diào)函數(shù)。這些函數(shù)對于追蹤運(yùn)行時錯誤非常有用，類似于Vue docs 中的這個提示。

這里有一個例子，在運(yùn)行 action 之前以及 action resolve/reject 之后打印日志記錄。

const unsubscribe = someStore.$onAction(
  ({
    name, // action 名稱
    store, // store 實(shí)例，類似 `someStore`
    args, // 傳遞給 action 的參數(shù)數(shù)組
    after, // 在 action 返回或解決后的鉤子
    onError, // action 拋出或拒絕的鉤子
  }) => {
    // 為這個特定的 action 調(diào)用提供一個共享變量
    const startTime = Date.now()
    // 這將在執(zhí)行 "store "的 action 之前觸發(fā)。
    console.log(`Start "${name}" with params [${args.join(', ')}].`)
    // 這將在 action 成功并完全運(yùn)行后觸發(fā)。
    // 它等待著任何返回的 promise
    after((result) => {
      console.log(
        `Finished "${name}" after ${
          Date.now() - startTime
        }ms.\nResult: ${result}.`
      )
    })
    // 如果 action 拋出或返回一個拒絕的 promise，這將觸發(fā)
    onError((error) => {
      console.warn(
        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
      )
    })
  }
)
// 手動刪除監(jiān)聽器
unsubscribe()

默認(rèn)情況下，action 訂閱器會被綁定到添加它們的組件上(如果 store 在組件的 setup() 內(nèi))。這意味著，當(dāng)該組件被卸載時，它們將被自動刪除。如果你想在組件卸載后依舊保留它們，請將 true 作為第二個參數(shù)傳遞給 action 訂閱器，以便將其從當(dāng)前組件中分離：

<script setup>
const someStore = useSomeStore()
// 此訂閱器即便在組件卸載之后仍會被保留
someStore.$onAction(callback, true)
</script>