写 Nuxt 遇到的两个小问题

2024-03-20 · 周三一般多云

今天在公司做的事情是继续看 Glarity 项目的代码,以及研究谷歌翻译 API 的调用和对现有插件逻辑的接入,前者直接参考竞品的请求数据就完了,后者还需要重构业务代码,因为之前他们写的逻辑是面向过程单一的获取 YouTube 字幕,其中部分逻辑需要提炼出来复用。

晚上写了一阵子 Nuxt,主要遇到两个问题。一个是原先代码设计的问题,不能用 React 思维写 Vue,服务器执行一次 defineComponent 函数之后客户端就不会再执行了,如果数据需要转换,要么修改 useFetch 增加 transform 调整,要么使用 computed 格式化数据。

const state = reactive({
  data: [],
  months: [],
});

const { data } = await useFetch<API.Response<API.Note.INoteTimelineData[]>>(`/api/note/timeline`, {
  query,
});

// 👎 只会在服务器执行一次
if (data.value) {
  const [notes, months] = parseTimeline(data.value.data);

  state.data = notes;
  state.months = months;
}

// 👍 客户端和服务端都会正常执行渲染
const computedData = computed<IComputedData>(() => (
  data.value ? parseTimeline(data.value.data) : [[], []]
));

第二个问题是改为 Nuxt 渲染之后才出现的问题,发现我日记页动态插入的“时间轴”链接按钮消失了。

onBeforeMount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

主要是组件变成了 async 的,需要等待服务器端获取数据才渲染组件,这个警告的意思就是遇到 await 的 Hooks 之前就得先执行这个 Hooks,否则 onBeforeMount 的内容就不会执行。把代码改成下面的次序就可以解决问题。

// 我封装的 Hooks,里面有一个 onBeforeMount 的调用
useAction();

// Nuxt 的数据请求 Hooks
const { data } = await useFetch();
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 14 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

近期评论

鲍小螺: 前辈多多指教!ahu: 后生可畏寻梦xunm: 真不错,板子很好看。timochan: 太惨了( ,更新暴毙,如果恢复没成功,数据也 dump 不出来鲍小螺: 在这部分对话中,广树和保罗继续讨论生活的不同方面。保罗提到了技术更新和国内的优秀 IT 技术。广树解释了在国内积累的经验如何在日本产生穿越的感觉,并表达了对于日本生活节奏的喜爱。他还提到了医疗水平的差异和对于生活方式的感受。保罗表示,通过动漫和现实的对比,艺术来源于现实,日本生活的确有着独特之处。他们讨论了国内的生活节奏和就医等方面的压力,以及个人选择的自由。最后,他们也谈到了不结婚不买房的选择和对于房价的困扰。鲍小螺: 该对话进一步讨论了房地产和税收的问题。保罗提到了国内的房地产税和增值税以及日本的固定资产税。广树解释了日本房地产税的收取方式,以及房产税对于国内房产的影响。他认为,与国内相比,日本的房子质量和服务更好。保罗提出疑问,为什么自己拥有的地也要交税。广树解释了类似增值税的原理,并指出在日本拥有房产是稳定安全的。最后,保罗表示从广树的角度来看,情况确实是如此。鲍小螺: 这篇文章的聊天记录也尝试过用 GPT 总结,结果并不是太好,不知道是不是 Prompt 的问题,实际出来的内容过于简练了,于是又耗费了半小时写完,呼~
奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君