pinia 修改狀態的幾種方式

在深入瞭解核心概念之前，我們需要知道 Store 是使用 defineStore() 定義的，並且它需要一個唯一名稱，作爲第一個參數傳遞：

import { defineStore } from 'pinia'
const useStore = defineStore('storeId', {
  // 推薦使用 完整類型推斷的箭頭函數
  state: () => {
    return {
      // 所有這些屬性都將自動推斷其類型
      counter: 0,
      name: 'Eduardo'
      items: [],
      hasChanged: false,
    }
  },
})

默認情況下，您可以通過 store 實例訪問狀態來直接讀取和寫入狀態：

const store = useStore()
store.counter++

重置狀態

您可以通過調用 store 上的 $reset() 方法將狀態 重置 到其初始值：

const store = useStore()
store.$reset()

改變狀態

除了直接用 store.counter++ 修改 store，你還可以調用 $patch 方法。它允許您使用部分 “state” 對象同時應用多個更改：

store.$patch({
  counter: store.counter + 1,
  name: 'Abalam',
})

但是，使用這種語法應用某些突變非常困難或代價高昂：任何集合修改（例如，從數組中推送、刪除、拼接元素）都需要您創建一個新集合。正因爲如此，$patch 方法也接受一個函數來批量修改集合內部分對象的情況：

store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

這裏的主要區別是 $patch() 允許您將批量更改的日誌寫入開發工具中的一個條目中。注意兩者，state 和 $patch() 的直接更改都出現在 devtools 中，並且可以進行 time travelled。

替換狀態

您可以通過將其 $state 屬性設置爲新對象來替換 Store 的整個狀態：

store.$state = { counter: 666, name: 'Paimon' }

您還可以通過更改 pinia 實例的 state 來替換應用程序的整個狀態。這在 SSR for hydration 期間使用。

pinia.state.value = {}

大多數時候，state 是 store 的核心部分。我們通常從定義應用程序的狀態開始。在 Pinia 中，狀態被定義爲返回初始狀態的函數。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/zYPN1DNrE3IU1o0GH3qIow