[筆記] Nuxt 換頁重設全部 pinia Store @地瓜大的飛翔旅程

章節連結

內容
程式碼

開發 Nuxt 專案在執行換頁時，預設是不會重設所有的 pinia store 內容。若真要實現這樣的需求，那就得自行撰寫一個 plugin 來註冊所有的 store，並同時在載入每一頁時，觸發 pinia 自帶的 $reset 方法即可。

內容

寫一個 useStoreReset 方法，並用一個全域變數如 registeredStores 來儲存已經註冊的 store。這樣一來你在各檔案呼叫的 useStoreReset() 時，就可拿到所有已經進行初始化的 store，進而可用每一個 store 實例的 $reset 方法來重設預設值。

順帶一提，store 必須是用 option 的方式宣告，否則你就得自行撰寫這個 $reset 方法。

https://pinia.vuejs.org/core-concepts/state.html#Resetting-the-state

程式碼

import type { Store } from 'pinia'

const registeredStores: Store[] = []

/**
 * 用來將 store 註冊到我們的陣列中。
 * @param store - The store instance to register.
 */
function registerStore(store: Store) {
  if (typeof store.$reset === 'function') {
    // 防止重複註冊
    if (!registeredStores.find((s) => s.$id === store.$id)) {
      registeredStores.push(store)
    }
  }
}

export const useStoreReset = () => {
  const resetAllStores = () => {
    if (registeredStores.length === 0) return

    registeredStores.forEach((store) => {
      store.$reset()
    })
  }

  return {
    resetAllStores,
    registerStore,
  }
}

import type { Store } from 'pinia'

const registeredStores: Store[] = []

/**

* 用來將 store 註冊到我們的陣列中。

* @param store - The store instance to register.

function registerStore(store: Store) {

if (typeof store.$reset === 'function') {

// 防止重複註冊

if (!registeredStores.find((s) => s.$id === store.$id)) {

registeredStores.push(store)

}

export const useStoreReset = () => {

const resetAllStores = () => {

if (registeredStores.length === 0) return

registeredStores.forEach((store) => {

store.$reset()

})

}

return {

resetAllStores,

registerStore,

}

至於呼叫 registerStore 的時間點，那就自行撰寫一個 plugin，然後當 nuxtApp 內有 $pinia 時就呼叫即可

import type { Pinia } from 'pinia'

import { defineNuxtPlugin } from '#app'
import { useStoreReset } from '~/composables/useStoreReset'

export default defineNuxtPlugin((nuxtApp) => {
  const $pinia = nuxtApp.$pinia as Pinia | undefined
  if (!$pinia) return

  const { registerStore } = useStoreReset()

  if ($pinia) {
    $pinia.use(({ store }) => {
      registerStore(store)
    })
  }
})

import type { Pinia } from 'pinia'

import { defineNuxtPlugin } from '#app'

import { useStoreReset } from '~/composables/useStoreReset'

export default defineNuxtPlugin((nuxtApp) => {

const $pinia = nuxtApp.$pinia as Pinia | undefined

if (!$pinia) return

const { registerStore } = useStoreReset()

if ($pinia) {

$pinia.use(({ store }) => {

registerStore(store)

})

}

})

按讚加入粉絲團