Pinia 組合式 Store

組合式 Store

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

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

const useX = defineStore('x', () => {
  const y = useY()


  // ? 這是不可以的，因為 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()


  // ? 這是不可以的，因為 x 也試圖讀取 y.name
  x.name


  function doSomething() {
    // ? 讀取 computed 或 action 中的 x 屬性
    const xName = x.name
    // ...
  }


  return {
    name: ref('I am Y'),
  }
})

嵌套 store

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

對于 setup store ，你直接使用 store 函數(shù)頂部的一個 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

你可以直接在一個 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)
      }
    },
  },
})