vue3使用uuid , demo

Vue 3 中使用 UUID（Universally Unique Identifier，通用唯一识别码）可以用于生成唯一的标识符，这对于数据管理、状态跟踪等场景非常有用。下面是一个简单的 Vue 3 示例，演示如何在一个组件中生成并使用 UUID：

<template>
  <div>
    <button @click="generateUuid">点击获取UUID</button>
    <p>当前UUID: {{ uuid }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { v4 as uuidv4 } from 'uuid'; // 引入 uuid.js 库

// 定义一个响应式的变量存储 UUID
const uuid = ref('');

onMounted(() => {
  // 点击按钮时生成新的 UUID 并更新组件状态
  function generateUuid() {
    uuid.value = uuidv4(); // 使用uuidv4生成全局唯一的ID
  }
  
  generateUuid(); // 初始加载时也生成一个 UUID
});
</script>

在这个例子中，我们首先安装了 `uuid` 库（通常通过 npm install uuid），然后在 `setup` 钩子函数里，定义了一个名为 `uuid` 的 ref 变量来存储 UUID。当组件挂载并且用户点击按钮时，会触发 `generateUuid` 函数，该函数会生成一个新的 UUID 并将其赋值给 `uuid`。