清除 Nuxt 資料快取：clearNuxtData

Amd794發表於2024-08-06
UX快取

title: 清除 Nuxt 資料快取：clearNuxtData
date: 2024/8/6
updated: 2024/8/6
author: cmdragon

excerpt:
摘要：本文詳細介紹了Nuxt.js框架中的clearNuxtData方法，用於清除useAsyncData和useFetch快取的資料、錯誤狀態和待處理promises，以實現資料的實時更新和過載。透過實際示例展示了在不同頁面如何應用clearNuxtData來提升使用者體驗和資料新鮮度，包括方法簽名、使用場景及具體程式碼實現步驟。

categories:

  • 前端開發

tags:

  • Nuxt
  • 快取
  • 資料
  • 清除
  • 元件
  • 重新整理
  • 路由

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

在 Nuxt.js 中，useAsyncData 和 useFetch 是兩個非常常用的組合，用於從伺服器獲取資料並在元件中顯示。如果你在應用中使用這兩個組合器，你可能會需要一種方式來清除已經快取的資料，尤其是在路由切換或資料更新時。

什麼是 clearNuxtData？

clearNuxtData 是一個用於刪除 useAsyncData 和 useFetch 的快取資料、錯誤狀態以及待處理的 promises 的方法。這個方法幫助開發者在想要使某些資料失效或過載資料時，能夠方便地完成。

方法簽名

clearNuxtData(keys?: string | string[] | ((key: string) => boolean)): void
  • keys：一個或多個在 useAsyncData 中使用的鍵，用於指定清除哪些快取資料。如果不提供 keys，將會清除所有快取的資料。

使用場景

  • 當你需要重新獲取某個頁面的資料。
  • 當你路由切換時，想讓新頁面的資料重新載入。
  • 當你想清除特定的快取資料以避免舊資料對使用者的影響。

示例：如何使用 clearNuxtData

以下是一個簡單的 Nuxt.js 應用示例，展示如何使用 clearNuxtData。

建立 Nuxt 應用

首先，確保你已建立並設定好了一個 Nuxt 應用。如果還沒有，可以使用以下命令建立一個新專案。

npx nuxi@latest init my-nuxt-app

進入專案目錄：

cd my-nuxt-app

1. 安裝依賴

確保你的專案中已安裝了 Nuxt 相關依賴。

2. 使用 useAsyncData 獲取資料

在 pages/index.vue 中，我們將使用 useAsyncData 獲取一些資料。

<template>
  <div>
    <h1>首頁</h1>
    <button @click="reloadData">重新載入資料</button>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>

const { data, refresh } = await useAsyncData('my-data-key', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users')
  return await response.json()
})

const reloadData = () => {
  // 清除'我的資料鍵'的快取
  clearNuxtData('my-data-key')
  // 重新載入資料
  refresh()
}
</script>

在上面的示例中，我們定義了一個按鈕用於重新載入資料。reloadData 方法中，我們首先透過 clearNuxtData 清除了 my-data-key 的快取資料，然後呼叫 refresh 方法重新載入資料。

3. 建立另一個頁面

我們可以建立一個新的頁面，比如 pages/about.vue，這個頁面也會使用相同資料。

<template>
  <div>
    <h1>關於頁</h1>
    <div>
      <h2>使用者列表</h2>
      <ul>
        <li v-for="item in data" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
    <button @click="reloadData">重新載入資料</button>
  </div>
</template>

<script setup>

const { data, refresh } = await useAsyncData('my-data-key', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users')
  return await response.json()
})

const reloadData = () => {
  clearNuxtData('my-data-key')
  refresh()
}
</script>

在這裡，about.vue 也呼叫了 clearNuxtData 和 refresh，以確保在點選重新載入按鈕時能夠獲取最新的資料。

4. 執行應用

在專案根目錄下執行應用：

npm run dev

開啟瀏覽器，訪問 http://localhost:3000，你應該能夠看到首頁和關於頁，每個頁面都可以單獨載入資料，並在需要時重新整理資料。

總結

clearNuxtData 提供了一種簡單而有效的方式來管理資料的快取和狀態。當你需要控制資料的無效性或者重新獲取資料時，這個方法將非常有用。透過上面的示例，你可以開始在自己的 Nuxt 應用中使用 clearNuxtData，以提高使用者體驗和資料新鮮度。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：清除 Nuxt 資料快取：clearNuxtData | cmdragon's Blog

往期文章歸檔：

  • 使用 clearError 清除已處理的錯誤 | cmdragon's Blog
  • 使用 addRouteMiddleware 動態新增中間 | cmdragon's Blog
  • 使用 abortNavigation 阻止導航 | cmdragon's Blog
  • 使用 $fetch 進行 HTTP 請求 | cmdragon's Blog
  • 使用 useState 管理響應式狀態 | cmdragon's Blog
  • 使用 useServerSeoMeta 最佳化您的網站 SEO | cmdragon's Blog
  • 使用 useSeoMeta 進行 SEO 配置 | cmdragon's Blog
  • Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig | cmdragon's Blog
  • Nuxt.js 路由管理：useRouter 方法與路由中介軟體應用 | cmdragon's Blog
  • useRoute 函式的詳細介紹與使用示例 | cmdragon's Blog
  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog
  • 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
  • 使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog
  • Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog
  • 使用 useLazyFetch 進行非同步資料獲取 | cmdragon's Blog

相關文章