Nuxt 3 可组合项突然未定义

Question

我在 composables/getCurrentYear.ts 下为 currentYear 设置了一个可组合项

export const getCurrentYear = () => {
    return new Date().getFullYear();
  }

在我的页脚组件中，我将其定义为

<script setup>
const currentYear = getCurrentYear()
</script>

尽管它之前导入得很好，但我没有得到：

500
getCurrentYear is not defined

at _sfc_main.setup (./components/AppFooter.js:56:23)
at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:171:22)
at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7194:29)
at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7149:11)
at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:628:17)
at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:94:12)
at _sfc_ssrRender (./components/AppLayout.js:26:31)
at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:710:17)
at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:644:16)

我的依赖项没有改变，所以我有点不明白为什么这突然停止工作：

  "devDependencies": {
    "@nuxtjs/i18n": "^8.0.0-beta.11",
    "autoprefixer": "^10.4.13",
    "nuxt": "^3.4.3",
    "nuxt-simple-sitemap": "^2.4.23",
    "postcss": "^8.4.23",
    "tailwindcss": "^3.3.2"
  },
  "dependencies": {
    "@csstools/css-parser-algorithms": "^2.1.1",
    "@nuxtjs/google-fonts": "^3.0.0",
    "contentful": "^10.1.8",
    "contentful-rich-text-vue-renderer": "^3.1.0",
    "gsap": "file:gsap-bonus.tgz",
    "nuxt-swiper": "^1.1.0",
    "typescript": "^5.0.4"
  }

Answer 1

我也遇到了类似的问题，但是在 Pinia 和 Just plain Vue3 中，我直接返回了一个对象的实例，它最初由于某种原因工作，但在冷启动后失败，导致了这种混乱，虽然它是来自 a 的有效代码从模块角度来看，它对于框架内部无效。

Nuxt 会在后台为您的可组合项生成一个声明文件，我认为该声明文件会在下次运行时得到确认，因此在下次运行时它会显示为错误，因为您写错了，但它无法在第一次告诉您这一点周围（某种形式的编译竞争条件）。

在我看来，Pinia 和可组合项的概念是相似的，因为都需要函数包装器（容器），其中从内部返回要从容器中公开的变量，就好像您实际上使用不同的容器来轻松存储一样可用资源，例如，一个充满坚果，另一个充满螺栓。

useBolts > getBolt(diameter: 4mm, length: 30mm)

useNuts > getNut(diameter: 4mm)

嵌套的可组合项看起来像这样：

fixings = useFixings > { bolts = useBolts(), nuts = useNuts() }

fixings.bolts.getBolt(diameter: 4mm, length: 30mm)

您的日期代码在容器中应如下所示：

// composables/useDates.ts

export const useDates = () => { // The named container

  // A container method
  const getCurrentYear = () => new Date().getFullYear();


  return { getCurrentYear } // Expose as public interface

}

消耗你的容器：

// components/myComponenet.vue

<script setup>
  const { getCurrentYear } = useDates();

  console.log(getCurrentYear())
<script>

据我了解，需要这种格式，以便功能作为一组键值对返回，以便 Nuxt 在

useDate.d.ts

文件中生成键值类型声明，该文件将出现在项目内的

.nuxt

文件夹中.

故障排除

来自评论：

如果在

<compsoable-name>.d.ts

目录内未生成与

/.nuxt

匹配的文件名，或者运行该目录后在项目中完全丢失该目录，请确保您的项目文件和文件夹未设置为

readonly

，确保一切都是

 writable

在您的计算机上的项目中。

这个

.nuxt

文件夹在开发过程中应该存在并且可写，它是在运行

dev

或运行

nuxi prepare

时生成的。

以下是

.nuxt

目录中的一些资源：

https://nuxt.com/docs/guide/directory-struct/nuxt

Nuxt 在开发中使用 .nuxt/ 目录来生成 Vue 应用程序。

您不应触摸其中的任何文件，因为运行 nuxt dev 时将重新创建整个目录。

如果您想了解有关 Nuxt 根据您的目录结构生成的文件的更多信息，这个目录很有趣。

https://nuxt.com/docs/guide/directory-struct/composables

请注意，您必须运行 nuxiprepare、nuxidev 或 nuxibuild 才能让 Nuxt 生成类型。如果您在没有运行开发服务器的情况下创建可组合项，TypeScript 将抛出错误，例如找不到名称“useBar”。

Answer 2

来自Nuxt3官方文档

Nuxt 3 使用

composables/

目录通过自动导入功能自动将 Vue 可组合项导入到应用程序中！

因此，您可以尝试

composabled/getCurrentYear.ts

，而不是命名

composables/getCurrentYear.ts

Answer 3

在 nuxt 3 中，我在可组合中创建了新函数来桥接本项目中的操作https://github.com/ilhammeidi/awrora-starter/blob/main/composables/uiTheme.js

// composable/ui.js

import { useState } from '#app';

const useThemeMode = () => (useState('mode', () => 'dark'));

const states = {
  themeMode: useThemeMode,
};

// Execute state change
export function toggleDark(value) {
  const themeMode = useThemeMode();

  themeMode.value = value;
}

export default states;

<template>
  <!-- components/UiSettings.vue -->
  <div :class="themeMode">
    <button @click="switchTheme('light')">change to light</button>
    <button @click="switchTheme('dark')">change to dark</button>
  </div>
</template>

<script setup>
import ui, { toggleDark } from '@/composables/ui';

const themeMode = ui.themeMode();
function switchTheme(val) {
  toggleDark(val);
}
</script>