Nuxt 在反应变量方面与 Vue 有何不同？

Question

我使用 Vue 进行前端（业余）开发多年，并决定尝试一下 Nuxt。

完成本教程后，我认为我有了一个总体思路并创建了一个简单的项目，其中：

• 我会在页面上有一个输入，将数字发送到后端，
• 依次响应一个递增的数字
• 主页同时显示。

为此，我创建了一个新项目，在其中编写了一些文件：

server/api/addOne.ts

export default defineEventHandler((event) => {
    const oldNumber = (getRouterParam(event, 'number') || 0) as number
    return {
        oldNumber: oldNumber,
        newNumber: oldNumber + 1,
    }
})

app.vue

<template>
  <div>
    <AddOne></AddOne>
  </div>
</template>

components/AddOne.vue

<template>
    <div>
        <input v-model="myNumber" />
        <button @click="sendToServer">send</button>
        <div> -{{ numberFromServer }}- </div>
    </div>
</template>

<script lang="ts">
const myNumber = ref(0)
const numberFromServer = ref(0)
const sendToServer = async (number: number) => {
    console.log('clicked')
    const { data, pending, error, refresh } = await useFetch('/api/addOne', {
        method: 'post',
        body: {
            number: myNumber.value
        }
    })
    numberFromServer.value = data.newNumber
    myNumber.value = -1
    console.log(`number from server: ${numberFromServer.value}`)
}
</script>

应用程序构建并显示预期内容：

该应用程序无法运行（输入数字并按

send

没有任何反应），我收到以下警告：

 WARN  [Vue warn]: Property "myNumber" was accessed during render but is not defined on instance.
  at <AddOne>
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Property "numberFromServer" was accessed during render but is not defined on instance.
  at <AddOne>
  at <App>
  at <NuxtRoot>

我不明白它们来自哪里 -

myNumber

和

numberFromServer

是在组件中定义的。我已经很惊讶 VSCode 在我输入它们时没有建议它们，但我认为这可能是拥有正确插件的问题。

我认为我正在做一些根本错误的事情，因此我的问题是变量应该在 Nuxt 中定义，而不是在 Vue 中定义。

Answer 1

该错误的含义正如其所言，

numberFromServer

和

myNumber

在模板中使用，但未在脚本中定义。应该有

return { myNumber, ... }

用于设置功能，或者

const myNumber = ...

用于

script setup syntax

。如果安装程序无法正常执行，因此变量已定义但未返回，也可能会发生这种情况。

在这种情况下没有设置，这是发生此类错误时首先要检查的事情。

应该是：

<script setup lang="ts">