首页 > 其他分享 >使用 useNuxtData 进行高效的数据获取与管理

使用 useNuxtData 进行高效的数据获取与管理

时间:2024-07-22 15:10:44浏览次数:12  
标签:高效 缓存 useNuxtData value Blog 获取 error todos cmdragon


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 中的一个组合函数,用于访问通过其他数据获取函数(如useAsyncDatauseLazyAsyncDatauseFetch
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

往期文章归档:

标签:高效,缓存,useNuxtData,value,Blog,获取,error,todos,cmdragon
From: https://www.cnblogs.com/Amd794/p/18316021

相关文章

  • eyoucms获取当前栏目分类的下级栏目的文档列表
    [基础用法]标签:modelsartlist(channelartlist)备注:使用channelartlist也可以正常输出描述:获取当前栏目分类的下级栏目的文档列表用法:{eyou:modelsartlisttypeid='栏目ID'type='son'loop='20'}<ahref='{eyou:fieldname='typeurl'/}'>{eyou:f......
  • 关于token获取遇到的问题
    问题描述最近在做一个项目的登录的时候,发现了登录不上的问题。这个系统是从主系统(例如:www.abc.com)中登录,然后跳转到子系统中(例如:www.abc.com/d/e),主系统可以正常登录,但是在跳转子系统的过程中会遇到token失效的问题,总是进不去。问题研究最后发现,主系统登录后,token存储在path为......
  • Vue3 - 详解实现网站使用企业微信二维码扫描登录,企业微信授权第三方网站接入企业微信
    前言如果您需要Vue2版本,请访问这篇文章。在vue3|nuxt3网站开发中,详解实现网页集成使用“企业微信扫一扫登录”功能,用户使用手机企业微信app扫描网站的登录二维码后,获取用户身份信息及号码并完成授权登录教程,新手小白完整流程及示例运行代码,支持多种企业微信二......
  • U盘乱码文件恢复:高效数据恢复方法详解
    U盘作为我们日常生活和工作中常见的存储设备,时常用于数据的传输和保存。然而有时我们会发现U盘中的文件出现了乱码,这给我们的数据管理和使用带来了极大的不便。那么U盘乱码文件究竟是如何产生的?又该如何恢复呢?一、U盘乱码原因分析病毒感染:使用公共电脑后,U盘可能感染病毒,导致......
  • Flask 无法获取中文参数
    我已经在docker中从nvidia/cuda:12.5.1-cudnn-runtime-ubuntu22.04构建了一个Flask应用程序。但是这个flask无法接收任何utf-8请求,并出现Badrequestsyntax错误。#herethemessycodeä½\xa0好is你好inChinese,whichmeanshello......
  • 物联网实用小建议:让生活与工作更智能高效
    在当今数字化的时代,物联网(InternetofThings,简称IoT)正以前所未有的速度改变着我们的生活和工作方式。从智能家居设备到工业自动化系统,物联网的应用无处不在。然而,要充分发挥物联网的潜力,我们需要掌握一些实用的小建议。https://ad.pdb2.com/l/CPCeKnK8DHfjEiN 一、明确需......
  • unity3d Dictionary 根据key获取value
    unity3d Dictionary 根据key获取value  usingSystem;usingSystem.Collections.Generic;usingUnityEngine;publicclassDictionaryExample:MonoBehaviour{privateDictionary<string,int>myDictionary;voidStart(){//初始化......
  • Elastic Search基于Spring Boot实现复杂查询和对复杂查询结果的映射银行账户对象并获
    packagecom.alatus.search;importcom.alatus.search.config.MallElasticSearchConfig;importcom.alibaba.fastjson.JSON;importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;importlombok.ToString;importorg.elasticsearch.......
  • 网络编程的艺术:Xcode中构建高效网络应用的秘诀
    网络编程的艺术:Xcode中构建高效网络应用的秘诀在移动应用开发中,网络编程是实现数据交换和远程服务调用的关键技术。Xcode,作为苹果官方的集成开发环境(IDE),提供了强大的工具和框架来支持网络编程。本文将深入探讨Xcode中网络编程的各个方面,包括使用URLLoadingSystem、NSURLS......
  • 利用ChatGPT完成文献综述并高效撰写,全流程实操指南,附50+顶级提示词指令
    大家好,感谢关注。我是七哥,一个在高校里不务正业,折腾学术科研AI实操的学术人。关于使用ChatGPT等AI学术科研的相关问题可以和作者七哥(yida985)交流,多多交流,相互成就,共同进步,为大家带来最酷最有效的智能AI学术科研写作指南高级学术科研GPT专业版已全面升级,国际顶级应用满足各种学......