Pinia 組合式 Store

組合式 Store

組合式 store 是可以相互使用，Pinia 當(dāng)然也支持它。但有一個(gè)規(guī)則需要遵循：

如果兩個(gè)或更多的 store 相互使用，它們不可以通過(guò) getters 或 actions 創(chuàng)建一個(gè)無(wú)限循環(huán)。它們也不可以同時(shí)在它們的 setup 函數(shù)中直接互相讀取對(duì)方的 state：

const useX = defineStore('x', () => {
  const y = useY()
  // ? 這是不可以的，因?yàn)?y 也試圖讀取 x.name
  y.name
  function doSomething() {
    // ? 讀取 computed 或 action 中的 y 屬性
    const yName = y.name
    // ...
  }
  return {
    name: ref('I am X'),
  }
})
const useY = defineStore('y', () => {
  const x = useX()
  // ? 這是不可以的，因?yàn)?x 也試圖讀取 y.name
  x.name
  function doSomething() {
    // ? 讀取 computed 或 action 中的 x 屬性
    const xName = x.name
    // ...
  }
  return {
    name: ref('I am Y'),
  }
})

嵌套 store

注意，如果一個(gè) store 使用另一個(gè) store，你可以直接導(dǎo)入并在 actions 和 getters 中調(diào)用 useStore() 函數(shù)。然后你就可以像在 Vue 組件中那樣使用 store。參考共享 Getter 和共享 Action。

對(duì)于 setup store ，你直接使用 store 函數(shù)頂部的一個(gè) store：

import { useUserStore } from './user'
export const useCartStore = defineStore('cart', () => {
  const user = useUserStore()
  const list = ref([])
  const summary = computed(() => {
    return `Hi ${user.name}, you have ${list.value.length} items in your cart. It costs ${price.value}.`
  })
  function purchase() {
    return apiPurchase(user.id, this.list)
  }
  return { summary, purchase }
})

共享 Getter

你可以直接在一個(gè) getter 中調(diào)用 useOtherStore()：

import { defineStore } from 'pinia'
import { useUserStore } from './user'
export const useCartStore = defineStore('cart', {
  getters: {
    summary(state) {
      const user = useUserStore()
      return `Hi ${user.name}, you have ${state.list.length} items in your cart. It costs ${state.price}.`
    },
  },
})

共享 Actions

actions 也一樣：

import { defineStore } from 'pinia'
import { useUserStore } from './user'
export const useCartStore = defineStore('cart', {
  actions: {
    async orderCart() {
      const user = useUserStore()
      try {
        await apiOrderCart(user.token, this.items)
        // 其他 action
        this.emptyCart()
      } catch (err) {
        displayError(err)
      }
    },
  },
})