Vue3前端生成随机id(生成 UUID)实际运用

效果展示

封装工具（代码展示）

重新创建一个文件**/utils/someTools.js**，并在里面写入如下代码。

function Tools() {

}

Tools.prototype.guid = function () {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0,
        v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

const tools = new Tools();
export default tools;

实际运用-----SomeTools.guid()

随机打开一个你想要生成id的文件，先引入文件，然后调用**guid（）**方法。

import { ref } from 'vue'
import SomeTools from '@/utils/someTools.js' 
 
//直接这样就可以使用啦
//SomeTools.guid()

//可以直接赋值使用，例如：
const id = ref(null)
id.value = SomeTools.guid()

附：UUID安装、卸载问题

本来是要做一个测速的功能，点击开始测速，自动生成唯一的批次ID，然后自动请求100次，需要自动生成唯一的日志ID。使用时间格式到毫秒，也还是有重复的问题。所以想到使用UUID。现在我是注释调的

<script>
  import * as echarts from 'echarts'
// import { v4 } from 'uuid'
</script>

因为使用uuid报错，我是前端新手，但是是9年安卓开发经验，决定从业务方面解决。正常情况从后台生成唯一日志ID，失败的情况，后台根据XXX也是可以算出的。解决

解决步骤

卸载问题，我注释调uuid的引入，还是报v4引入包找不到问题；

解决方法：

1、注释uuid的引入，重新执行使用npm install。执行很慢，然后试试执行cnpm install.cnpm install 执行成功。

2、注释uuid的引入，重新执行使用npm install。执行很慢，然后试试执行cnpm install.

3、再次运行npm run serve 还是报错uuid 的v4包找不到；

4、然后，询问同事，说是手动删除配置文件里面的引入试试。

5、这个文件一般是自动生成的，我恐怕删掉以后，项目启动不了。so，先备份，我删掉以后，重新cnpm install，还是不行。

6、我想起了以前网上看到的方法，删掉node_modules,备份好项目后，于是，我删掉node_modules。

7、重新cnpm install，此时看到安装的包数量，减少了一个，估计有成功的希望。

8、重新npm run serve，成功。

总结 

到此这篇关于Vue3前端生成随机id(生成 UUID)的文章就介绍到这了,更多相关Vue3前端生成随机id内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！