Pinia 快速上手要點

使用 defineStore 創建一個 store, 每個 store 要設置一個唯一 id；

import { defineStore } from 'pinia'
import { ref } from 'vue'

// useStore 可以是 useUser、useCart 之類的任何東西
// 第一個參數是應用程式中 store 的唯一 id
export const useMainStore = defineStore('main', {
  // other options...
    const name = ref('cherish')
	const count = ref(0)
    
    return {
    	name,
        count
	}
})

改變state 的值時不需要藉助 mutation (pinia中沒有mutation), 預設情況下，您可以通過 store 實例訪問狀態來直接讀取和寫入狀態；

const mainStore = useMainStore()
mainStore.count++

除了直接用 store.count++ 修改 store，你還可以調用 $patch 方法同時應用多個更改; $patch 方法也接受一個函數來批量修改集合內部分對象的情況;

const mainStore = useMainStore()
mainStore.$patch({
  counter: mainStore.counter + 1,
  name: 'yb.z',
})

useMainStore 中的返回值，不能使用解構語法，否則會失去響應性，但是可以使用 storeToRefs 包裹 store，然後可以使用解構；

import { storeToRefs } from 'pinia'

const mainStore = useMainStore() // 正確
const { name } = useMainStore() // 錯誤
const { name } = storeToRefs(useMainStore()) // 正確

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

const mainStore = useMainStore()
mainStore.name = 'yb.z'
mainStore.$reset() // mainStore.name cherish

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

const mainStore = useMainStore()
mainStore.$state = { counter: 666, name: 'yb.z' }

可以通過 store 的 $subscribe() 方法查看狀態及其變化, 與常規的 watch() 相比，使用 $subscribe() 的優點是 subscriptions 只會在 patches 之後觸發一次;

使用getter 和 直接在狀態中使用 computed 計算的效果一樣；

如果一個 getter 依賴另一個 getter，通過 this 訪問任何其他 getter；

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    // 類型是自動推斷的，因為我們沒有使用 `this`
    doubleCount: (state) => state.counter * 2,
    // 這裡需要我們自己添加類型（在 JS 中使用 JSDoc）。 我們還可以
    // 使用它來記錄 getter
    /**
     * 返回計數器值乘以二加一。
     *
     * @returns {number}
     */
    doubleCountPlusOne() {
      // 自動完成 ✨
      return this.doubleCount + 1
    },
  },
})

同 computed 屬性一樣，getter 預設是不能傳遞參數進去的，但是，您可以從 getter 返回一個函數以接受任何參數，此時 getter 變成了一個普通函數，不再緩存數據。

要使用其他 store 的 getter, 可以直接在一個 store 中引入和使用另一個 store;

import { useOtherStore } from './other-store'

export const useStore = defineStore('main', {
  state: () => ({
    // ...
  }),
  getters: {
    otherGetter(state) {
      const otherStore = useOtherStore()
      return state.localData + otherStore.data
    },
  },
})

getter 的訪問和 state 一模一樣，都是 xxxStore.xxx;

與 getter 一樣，actions 操作可以通過 this 訪問整個 store 實例，不同的是，action 可以是非同步的，當然也可以是同步的，你可以在它們裡面 await 調用任何 API，以及其他 action！可以把 action 理解為普通的方法；

想要使用另一個 store 的action的話，可以直接在一個 store 中引入和使用另一個 store， 然後直接在 action 中調用就好了另一個 store 的action 就好了。

import { useAuthStore } from './auth-store'

export const useSettingsStore = defineStore('settings', {
  state: () => ({
    preferences: null,
    // ...
  }),
  actions: {
    async fetchUserPreferences() {
      const auth = useAuthStore()
      if (auth.isAuthenticated) {
        this.preferences = await fetchPreferences()
      } else {
        throw new Error('User must be authenticated')
      }
    },
  },
})