先聊聊为啥我们需要 UUID

说实话，项目里要给每条数据一个独一无二的标识，这事儿可不是闹着玩的。

Ru果用自增 ID，迁移数据库、分库分表的时候就容易撞车。

那 UUID 进场了理论上全局唯一，省心省力。

哈哈，你可Neng会想，“我在 Vue 里怎么玩儿 UUID 呢？”别急，咱慢慢来。

打开终端，敲一句：

npm install uuid --save

不对不对，我刚才说错了这一步其实也Ke以用 yarn 或 pnpm，随你喜欢。

我们一般在 选哪个版本的 UUID 合适？

说实话，大多数场景直接 v4 就行了。

Ru果你想要时间有序、方便Zuo分页，那Ke以考虑 v7，但它在老浏览器上可Neng要 polyfill。

还有 v1、v5、v6…每个dou有自己的“小脾气”。比如 v5 用 SHA‑1 哈希，适合同一个名字同一个命名空间永远得到同一个 ID。

嗯，这事儿有点儿尴尬。其实百度爬虫geng爱抓内容丰富、结构清晰的页面。要是你的页面缺少 meta description、标题层级乱套或者太多 JS 动态渲染，那爬虫就可Neng悄悄溜走。

再者，Ru果服务器返回的 HTTP 状态码不是200，或者 robots.txt 把 /api/ 给屏蔽了也会导致“不收录”。所以记得检查一下这些细节，别让搜索引擎白跑一趟。

const raw = uuidv4.replace // 如需压缩可用此法

Ru果你觉得完整的36字符太长，Ke以装个 tiny 包，把它压成 Base64 或自定义字符集。咱们这里不展开细节，你懂的，就是把长串变短点儿。

// store.js
import { defineStore } from 'pinia'
import { v4 as uuidv4 } from 'uuid'
export const useAppStore = defineStore('app', {
  state:  => ({
    sessionId: uuidv4
  })
})

• #1 #Ru果你把 alert)           …

• #2 #别在 SSR 环境里直接调用随机函数，要放到客户端钩子里否则服务端渲染出来的页面每次dou会变！

• #3 #Ru果你使用 Vite 按需导入，一定记得在 vite.config.js 加上 optimizeDeps，以免打包体积爆炸。哈哈哈，这点小细节hen多人dou忽略了。

• #4 #不要把 UUID 当作密码或加密钥匙，它本身不具备安全特性，只是唯一而Yi。

说实话，用 Vue 搞定唯一标识并没有想象中那么难。

装个库，引入对应函数，用 ref 或者 Pinia 把它挂上去，就完事儿啦。

以后再遇到“怎么给这条记录加个唯一键？”的时候，只要想起这篇随意又带点口头禅的小文，就Neng立马开工。

祝你编码顺利，UUID 永不冲突！哈哈~