vue state

// Vue 3 示例代码：使用 Composition API 管理状态 (state)

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 定义一个响应式的 state 变量
    const count = ref(0);

    // 定义一个方法来修改 state
    const increment = () => {
      count.value++;
    };

    // 返回 state 和方法，使其可以在模板中使用
    return {
      count,
      increment
    };
  }
};
</script>

<!-- 解释说明：
1. `ref` 是 Vue 3 中用于创建响应式数据的函数。这里我们用它来定义一个名为 `count` 的响应式变量，初始值为 0。
2. `setup` 函数是 Composition API 的入口点，在这里我们可以定义和返回组件的状态和逻辑。
3. `increment` 方法用来增加 `count` 的值。由于 `count` 是通过 `ref` 创建的，所以我们需要通过 `.value` 来访问和修改它的值。
4. 最后，我们将 `count` 和 `increment` 返回，这样它们就可以在模板中使用了。
-->