pinia 修改狀態(tài)的幾種方式

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

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

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

const store = useStore()
store.counter++

重置狀態(tài)

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

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

改變狀態(tài)

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

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

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

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

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

替換狀態(tài)

您可以通過將其 $state 屬性設(shè)置為新對象來替換 Store 的整個狀態(tài)：

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

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

pinia.state.value = {}

大多數(shù)時候，state 是 store 的核心部分。我們通常從定義應(yīng)用程序的狀態(tài)開始。在 Pinia 中，狀態(tài)被定義為返回初始狀態(tài)的函數(shù)。