使用 useNuxtData 進行高效的數據獲取與管理

-Advertisement-

title: 使用 useNuxtData 進行高效的數據獲取與管理 date: 2024/7/22 updated: 2024/7/22 author: cmdragon excerpt: 深入講解了Nuxt 3中useNuxtData組合函數的應用，演示瞭如何通過此函數訪問緩存數據，實現組件間數 ...

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

excerpt:
深入講解了Nuxt 3中useNuxtData組合函數的應用，演示瞭如何通過此函數訪問緩存數據，實現組件間數據共用，以及如何在數據更新時利用緩存提高用戶體驗。文章提供了具體的用法示例，包括數據獲取、訪問緩存數據和數據更新的場景。

categories:

前端開發

tags:

Nuxt3
緩存
數據
共用
組件
更新
性能

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

`useNuxtData` 概述

useNuxtData是 Nuxt 3 中的一個組合函數，用於訪問通過其他數據獲取函數（如useAsyncData、useLazyAsyncData、useFetch
和useLazyFetch等）緩存的數據。它允許在不同的組件之間共用數據，避免重覆請求，提高性能。

主要功能

訪問緩存數據：通過提供一個唯一的鍵名來訪問之前緩存的數據。
數據共用：不同的組件可以共用同一數據源，確保數據一致性。
更新：在數據更新時可以使用緩存數據作為占位符，提高用戶體驗。

用法示例

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

往期文章歸檔：

您的分享是我們最大的動力!