Nuxt3 一个简单的客户端数据更新

Question

我过去使用 Nuxt2 做过一些工作，但我觉得自己很愚蠢，我不知道如何完成对一些本地数据的简单更新Nuxt 3.这是在客户端。

这是样本

index.vue

<template>
  <div>
     <div>{{ d }}</div>
     <button v-on:click="change">
  </div>
</div>

<script setup>
  let d = 1;

  function change() {
     // increment d
     d++
  }
</script>

该值不会改变。

我尝试浏览以查看示例，但 Nuxt3 的所有焦点似乎都围绕异步和获取。我想这就是发生重大变化的地方。

是否有任何网站有典型客户端应用程序的示例，展示了它是如何在 Nuxt2 和现在的 Nuxt 3 中完成的。

Answer 1

我想到了

index.vue

<template>
  <div>
     <div>{{ d }}</div>
     <button v-on:click="change">
  </div>
</div>

<script setup>
  // need to import the functions required
  import {ref} from 'vue'

  // set the initial value
  let d = ref(1);

  function change() {
     // increment d's value
     d.value++
  }
</script>