vue3 + ts：使用uuid / Universally Unique Identifier / 通用唯一标识符

一、理解uuid

在 JavaScript 中使用 uuid 库的 v4 方法时，每次调用 uuidv4() 都会生成一个新的、基于随机数的 UUID（Universally Unique Identifier，通用唯一标识符）。这种随机性确保了即使在同一个浏览器会话中，每次生成的 UUID 也是唯一的。

每次调用 uuidv4() 函数时，它都会生成一个新的、随机的 UUID。这是因为在生成 UUID 的过程中，它依赖于随机数生成器来创建标识符的不同部分。由于随机数的本质，每次调用时生成的数字序列都会不同，因此生成的 UUID 也会不同。

二、使用vue3-uuid

pnpm add vue3-uuid

切换源：

pnpm config set registry https://registry.npmmirror.com //切换淘宝源 

pnpm：简介_snowball@li的博客-CSDN博客_pnpm

切换后安装成功

main.ts

// main.ts
import { createApp } from 'vue'
import '@/styles/index.less'
import '@/styles/reset.less'
import App from './App.vue'
import UUID from 'vue3-uuid'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from "./routers/index";
import { api } from './api/index'
import 'vue-global-api';

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(UUID)
app.config.globalProperties.$api = api
app.mount('#app')

Vue 3和安装UUID演示 - 问答 - 腾讯云开发者社区-腾讯云

***使用失败***

三、改用uuid

pnpm add uuid

业务文件使用：

import { v4 as uuidv4 } from "uuid";

console.log('136', uuidv4())

使用成功

四、uuid每次生成的一样吗

不一样

import { v4 as uuidv4 } from "uuid";

// 生成第一个 UUID
const uuid1 = uuidv4();
console.log("UUID 1:", uuid1);

// 生成第二个 UUID
const uuid2 = uuidv4();
console.log("UUID 2:", uuid2);

在上面的代码中，uuid1 和 uuid2 将是两个不同的 UUID，即使它们是在同一个浏览器会话中生成的。

UUID 版本 4（v4）的生成算法依赖于随机数或伪随机数，这确保了生成的 UUID 在统计上具有高度的唯一性。由于这种随机性，即使在短时间内连续生成多个 UUID，它们也几乎不可能是相同的。

五、欢迎交流指正，关注我一起学习。

参考链接

vue使用uuid，请求头headers设置uuid_import { v4 as uuidv4 } from 'uuid';-CSDN博客

js 获取设备或浏览器唯一标识的方式_草字的博客-CSDN博客_js获取设备唯一标识

vue中使用uuid_李疆~的博客-CSDN博客_vue-uuid

vue3-uuid - npm

uuid - npm