Vuejs生成唯一标识符-UID或GUID的例子

在这篇博文中，我们将通过实例学习如何在vuejs应用程序中生成UUID或GUID。

Vuejs唯一标识符介绍

唯一标识符的生成在任何语言的应用中都是需要的。

这可以在数据库中作为主键使用，如mongodb中后端应用程序的id，或者你可以在前端MVC应用程序中存储会话id，如Angular或vueJS。

UUID或GUID的别名都是指相同的，包含16个字节或128位的大小，由连字符分成5组。

在vuejs应用程序中，有不同的方法来创建UUID

• 使用现有的npm包，如vue-uuid
• 自定义UUID代码来生成一个唯一的ID

使用npm包生成唯一标识符的例子

我们可以通过多种方式生成GUID。

vue-uuid使用实例

vue-uuid 是一个用于nodejs应用程序的npm包。

首先，你需要使用npm install命令来安装它

npm install --save vue-uuid  

这将在node_modules中生成依赖，并在package.json的依赖部分添加一个条目。

在应用程序中导入UUID模块
UUID是vue-uuid库中定义的全局模块。

在使用这个全局对象和属性之前，你需要在你的mail.js文件中导入。T

通过调用Vue.usewith uuid main.js，这个uuid是全局可用的。

import Vue from 'vue'  
import App from './App.vue'  
import UUID from 'vue-uuid'  
  
Vue.use(UUID);  
  
Vue.config.productionTip = false  
  
new Vue({  
  render: h => h(App)  
}).$mount('#app')  

一旦全局配置完毕，uuid对象就可以在你的vue组件的模板中使用。

用于生成UUID的Vue组件
在vue组件的脚本标签中，首先导入uuid对象并调用uuid.v1()返回GUID或UUID

<template>  
  <div id="app">  
    <h1 class="uuid">{{ uuid }}</h1>  
  </div>  
</template>  
  
<script>  
  import { uuid } from 'vue-uuid' // Import uuid  
  export default {  
   data () {  
      return {  
        uuid: uuid.v1(),  
      
      }  
    }  
  }  
</script>  
  
<style>  
#app {  
  font-family: 'Avenir', Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style>  

输出是

1f5cdb80-cd7f-11e8-bf21-1dd90afe8dad  

自定义UUID代码来生成一个唯一的ID

你可以复制javascript函数UUID生成代码并在vue组件中创建一个方法。