Nuxt Instance Unavailable - Async Code in Vue and Nuxt with the Composition API (+ raffle 🎁)

Summary

在这段视频脚本中，主讲人讨论了一个常见的编程错误信息：'next instance unavailable'，这通常与异步代码有关。视频首先提到了一个延长的抽奖活动，鼓励观众参与评论以赢取前往vew conf的免费门票。随后，主讲人通过一个演示应用程序，展示了如何引发和解决这个错误信息。他们解释了为什么这个错误会发生，以及如何在Vue 3和Knexus（一种状态管理库）中处理它。主讲人提供了多种解决方案，包括不使用异步权重、重新排列代码顺序、使用`call with KN`和`app.run with context`，以及启用实验性的`as context`选项。视频最后鼓励观众分享他们遇到这个错误时的解决方法，并提供了相关资源链接。

Takeaways

• 🌐 视频讨论了一个常见的错误消息 'next instance unavailable'，通常与异步代码有关。
• 🎁 主持人宣布了一个抽奖活动，延长了一周，并邀请观众在评论区分享他们想参加 Vew Conf 的原因以及他们使用 Vew 或 Next.js 构建的项目。
• 🔍 主持人展示了如何触发 'next instance unavailable' 错误，并解释了它的含义以及如何修复。
• 🛠️ 为了演示错误，主持人创建了一个简单的应用程序，并故意引入了异步代码来触发错误。
• 📚 讨论了如何通过移动代码到不同的组件或使用不同的生命周期钩子来解决错误。
• 🔄 主持人提到了 Vue 团队成员 Anthony Fu 的博客文章，该文章解释了 Vue 中异步 composable 的工作原理。
• 👨‍🏫 主持人解释了为什么在 script setup 中使用异步代码时会出现问题，以及 Vue 是如何处理组件实例的。
• 🔧 提供了几种解决方案，包括重新排序代码、使用不同的生命周期钩子、使用 `runWithContext` 和 `callWith` 方法，以及启用实验性的 `useAsyncContext` 选项。
• 🔗 提到了 `useAsyncContext` 是一个实验性功能，它允许在所有嵌套的异步 composable 中使用原生的异步上下文。
• 🚀 最后，主持人鼓励观众在评论中分享他们如何处理这个错误，以及他们打算尝试哪些解决方案。

Q & A

什么是'next instance unavailable'错误信息，它通常在什么情况下出现？

这个错误信息通常与异步代码有关，当Vue中的某个composable需要访问Vue实例的上下文，但是这个上下文不可用时，就会出现这个错误。这通常发生在使用script setup时，尤其是在异步函数和composable混合使用的情况下。

视频提到的'raffle'是什么，以及如何参与？

视频中提到的'raffle'是一个抽奖活动，参与者需要在视频下方留言，说明为什么想去Vew Conf以及他们已经使用Vue构建了什么。然后，视频作者将在下周抽取一名获奖者，赠送免费门票。

视频作者提到了哪些方法来解决'next instance unavailable'错误？

视频作者提到了多种解决方法，包括：避免在composables中使用异步代码，重新排列代码顺序使得composables在异步函数之前调用，使用`callWithKN`和`app.runWithContext`，以及启用Vue的实验性特性`useAsyncContext`。

如何使用`useAsyncContext`来解决'next instance unavailable'错误？

在Vue应用中，可以通过在`createApp`函数中设置`useAsyncContext`为`true`来启用这个实验性特性。这将允许异步composables访问Vue实例的上下文，从而解决错误。

视频作者提到了`script setup`的局限性，具体是什么？

`script setup`在顶层使用时可以很好地工作，因为它允许编译器执行一些特殊的处理来保持Vue实例的上下文。但是，当在`script setup`之外或者多层嵌套的composables中使用时，这种处理就不再有效，可能会导致`next instance unavailable`错误。

为什么`useAsyncContext`是一个实验性特性，它有什么潜在的问题？

`useAsyncContext`是基于Node.js的`asyncLocalStorage`实现的，这意味着它目前只在Node.js环境中有支持。由于Vue和Nitro等框架尝试保持运行时的中立性，这个特性在其他运行时环境中可能无法工作，因此它被标记为实验性。

视频作者提到了TC39的提案，这个提案的目的是什么？

TC39的提案旨在将`async context`作为一个语言原生特性引入到JavaScript中。这样，无论在哪个运行时环境中，只要支持JavaScript，`async context`就能正常工作，不再依赖于特定的平台如Node.js或Deno。

如何检查`useAsyncContext`是否在自己的项目中有效？

可以通过在项目的CI/CD流程中启用`useAsyncContext`并进行测试来检查它是否有效。如果项目托管在像Cloudflare Workers这样的边缘或无服务器运行时上，并且使用Node.js，那么启用`useAsyncContext`可能会有效。

视频作者提到了`useKNApp`和`app.runWithContext`，这些API是如何帮助解决错误的？

`useKNApp`可以用来获取Vue应用的实例，而`app.runWithContext`允许在特定的上下文中执行函数。通过将需要Vue实例上下文的composables包装在`app.runWithContext`中，可以确保这些composables不会丢失上下文，从而解决错误。

视频作者建议的测试策略是什么？

视频作者建议使用CI/CD流程中的测试来捕捉像`next instance unavailable`这样的错误。如果没有CI/CD，作者还提到了一个关于在Vue中进行测试的视频，可以作为参考。