使用 useNuxtData 進行高效的資料獲取與管理

Amd794發表於2024-07-22
UX

title: 使用 useNuxtData 進行高效的資料獲取與管理
date: 2024/7/22
updated: 2024/7/22
author: cmdragon

excerpt:
深入講解了Nuxt 3中useNuxtData組合函式的應用，演示瞭如何透過此函式訪問快取資料，實現元件間資料共享，以及如何在資料更新時利用快取提高使用者體驗。文章提供了具體的用法示例，包括資料獲取、訪問快取資料和資料更新的場景。

categories:

  • 前端開發

tags:

  • Nuxt3
  • 快取
  • 資料
  • 共享
  • 元件
  • 更新
  • 效能

image
image

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

useNuxtData 概述

useNuxtData是 Nuxt 3 中的一個組合函式，用於訪問透過其他資料獲取函式（如useAsyncData、useLazyAsyncData、useFetch
和useLazyFetch等）快取的資料。它允許在不同的元件之間共享資料，避免重複請求，提高效能。

主要功能

  1. 訪問快取資料：透過提供一個唯一的鍵名來訪問之前快取的資料。
  2. 資料共享：不同的元件可以共享同一資料來源，確保資料一致性。
  3. 更新：在資料更新時可以使用快取資料作為佔位符，提高使用者體驗。

用法示例

1. 獲取資料並快取

在pages/posts.vue中，我們可以使用useFetch來獲取帖子資料，並將其快取到posts鍵名下：

// pages/posts.vue
<script setup>

// 使用 useFetch 獲取資料並快取
const { data, error } = await useFetch('/api/posts', { key: 'posts' })

// 處理錯誤
if (error.value) {
  console.error('獲取帖子失敗:', error.value)
}
</script>

<template>
  <div>
    <h1>帖子列表</h1>
    <ul>
      <li v-for="post in data" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

2. 訪問快取資料

在pages/posts/[id].vue中，我們可以使用useNuxtData來訪問posts.vue中快取的帖子資料：

// pages/posts/[id].vue
<script setup>
import { useRoute } from 'vue-router'

// 獲取路由引數
const { id } = useRoute().params

// 訪問快取的帖子資料
const { data: posts } = useNuxtData('posts')

// 使用 useLazyFetch 獲取單個帖子的詳細資訊
const { data, error } = useLazyFetch(`/api/posts/${id}`, {
  key: `post-${id}`,
  default() {
    // 從快取中找到對應的帖子，並將其設定為預設值
    return posts.value.find(post => post.id === id) || null
  }
})

// 處理錯誤
if (error.value) {
  console.error('獲取帖子詳情失敗:', error.value)
}
</script>

<template>
  <div>
    <h1>帖子詳情</h1>
    <div v-if="data">
      <h2>{{ data.title }}</h2>
      <p>{{ data.content }}</p>
    </div>
  </div>
</template>

3. 更新

在pages/todos.vue中，我們可以使用useAsyncData來獲取待辦事項，並在新增新待辦事項時利用快取進行樂觀更新：

// pages/todos.vue
<script setup>

// 獲取待辦事項資料並快取
const { data: todos, error } = await useAsyncData('todos', () => $fetch('/api/todos'))

// 處理錯誤
if (error.value) {
  console.error('獲取待辦事項失敗:', error.value)
}
</script>

<template>
  <div>
    <h1>待辦事項</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.task }}</li>
    </ul>
    <NewTodo />
  </div>
</template>

在components/NewTodo.vue中，我們可以實現新增新待辦事項的邏輯：

// components/NewTodo.vue
<script setup>
import { ref } from 'vue'

const newTodo = ref('')
const previousTodos = ref([])

// 訪問 todos.vue 中 useAsyncData 的快取值
const { data: todos } = useNuxtData('todos')

const addTodo = async () => {
  const { data, error } = await useFetch('/api/addTodo', {
    method: 'post',
    body: {
      todo: newTodo.value
    },
    onRequest() {
      // 在請求開始時儲存當前的 todos 資料
      previousTodos.value = [...todos.value]
      // 樂觀更新 UI
      todos.value.push({ id: Date.now(), task: newTodo.value }) // 假設 ID 為當前時間戳
    },
    onRequestError() {
      // 請求失敗時回滾資料
      todos.value = previousTodos.value
    },
    async onResponse() {
      // 請求成功後重新整理 todos 資料
      await refreshNuxtData('todos')
    }
  })

  // 清空輸入框
  newTodo.value = ''
}
</script>

<template>
  <div>
    <input v-model="newTodo" placeholder="新增新待辦事項" />
    <button @click="addTodo">新增</button>
  </div>
</template>

型別定義

useNuxtData的型別定義如下：

useNuxtData<DataT = any> (key: string): { data: Ref<DataT | null> }
  • key: 用於訪問快取資料的鍵名。
  • data: 返回一個響應式引用，包含快取的資料或null。

注意事項

  • 確保在使用useNuxtData時，提供的鍵名與之前快取資料時使用的鍵名一致。
  • 在進行樂觀更新時，要小心處理資料的回滾，以避免使用者看到不一致的狀態。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog

往期文章歸檔：

  • Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog
  • 使用 useLazyFetch 進行非同步資料獲取 | cmdragon's Blog
  • 使用 useLazyAsyncData 提升資料載入體驗 | cmdragon's Blog
  • Nuxt.js 中使用 useHydration 實現資料水合與同步 | cmdragon's Blog
  • useHeadSafe：安全生成HTML頭部元素 | cmdragon's Blog
  • Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗 | cmdragon's Blog
  • 探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog
  • Nuxt.js 錯誤偵探：useError 組合函式 | cmdragon's Blog
  • useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog
  • 輕鬆掌握useAsyncData獲取非同步資料 | cmdragon's Blog
  • 使用 useAppConfig ：輕鬆管理應用配置 | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（五） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（四） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（三） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（二） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（一） | cmdragon's Blog

相關文章