英國文檔不看懂？學習Pinia就是這麼簡單---state篇

前言

上一篇文章我們大體的介紹了一下 Pinia 的基本資訊和基本概念，相信大多數小夥伴都對這個概念有了一個基本的認識。

關注微信公衆号

知碼前端

擷取

Vue Admin Work

架構源碼，分享有用的前端，後端的知識幹貨

接下來我們重點學習 Pinia中的一個重要概念 State。如果您之前使用過 Vuex的話，那麼對 State 肯定不會陌生，它是所有狀态的載體容器，也可以這樣說，其它的所有的概念也是圍繞着 State 去服務，是以它的重要程度不言而隻喻。

看一下 Pinia官網對 State 的基本介紹吧：（個人翻譯而來）

"大多數的時候，State 是 Store的中心部分，在應用中我們經常以定義一個State開始着手。在 Pinia裡面，State被定義成是一個傳回初始狀态的函數。

這樣服務端和用戶端就都可以使用。"

定義

從上面的資訊中我們要知道一個重點就是 State 要被定義成一個函數類型，且要傳回一個初始狀态的對象。這個地方和 Vue 中的 data 屬性一樣。

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // 為了所有的類型推斷建議使用箭頭函數
  state: () => {
    return {
      // 下面的屬性會被自動推斷出類型
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
})
           

以上就是簡單的定義一個 State

使用

上面我們定義好了一個State，接下來就是如何使用了。

通常情況下我們可以直接對 State的屬性進行

讀

和

寫

操作

const store = useStore()
store.counter++
           

除了可以對某個屬性進行修改之外，Pinia 還允許我們使用

$patch

方法進行批量操作屬性。用過 react 的同學，對這種操作方式應該不陌生。

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

當然，凡事有例外，如果我們需要對一個數組進行 push、splice等操作。這樣做就會非常的複雜且開銷很大。是以，

$patch

也允許我們傳入一個函數類型的參數來友善處理這種複雜的場景

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

以上就是對 State 的基本的使用。也是我們平時開發中經常使用的方式，與此同時 Pinia還給我們提供了很多好用的 api 來操作 State 。

個人感覺 Pinia 比 Vuex 真的是友善很多。

其它使用方式

• 使用 option api（mapState）的方式擷取屬性，個人感覺這種方式不太直覺，個人并不推薦這種方式，當然在某些場景下這種方式還是挺有用的，是以這種方式作為了解就好。用法和Vuex 中的 mapGetter 類似
• 重置 State。有的時候我們想要恢複 State資料到最初的狀态，就可以使用 Pinia 提供的

  $reset

  api進行操作

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

• 替換 State。個人感覺 Pinia 對 State 真是做了大量的工作，和重置State類似。Pinia 允許我們直接對 State進行替換。當然我們并不推薦使用這種方式，因為這會讓我們的狀态很難追蹤。

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

• 監聽 State的狀态變化，主要是使用 $subscribe 方法進行操作，接收一個回調函數，當狀态有變化時就會回調函數。在某些場景下還是挺有用的。當然我們也可以使用 Vue中的watch來監聽狀态變化

總結