vue3 nanoid生成唯一id的使用

dodadu

已于 2022-12-09 16:09:29 修改

阅读量1.7k

点赞数

文章标签： vue.js 前端

于 2022-12-09 16:08:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37861615/article/details/128254278

版权

本文介绍如何使用nanoid库在前端项目中生成唯一标识符。通过npm或yarn安装后，可以轻松地按需生成不同长度的随机字符串，并支持自定义字符集。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

nanoid可以用于前端生成唯一id
首先我们安装他
可以通过npm i nanoid或者yarn add nanoid安装

npm i nanoid
# 或者使用 yarn add nanoid

引入

import { nanoid } from 'nanoid';

使用

// 默认直接使用生成长度为21的字符串
const id = nanoid();
// 括号里面可以填参数指定生成字符串的长度,也可以不填
// const id = nanoid(11) 
console.log(id); // LZfXLFzPPR4NNrgjlWDxn

自定义

可自定义生成的字母,以及生成字符串的默认长度，我这里去掉了_和-

 // 可自定义生成的字母,以及生成字符串的默认长度，我这里去掉了‘_’和‘-’
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', 21);
// 使用
const id = nanoid();
console.log(id); // uSp56j9ymcXsGnRLBsriW