vue中如何使用唯一標(biāo)識(shí)uuid(uuid.v1()-時(shí)間戳、uuid.v4()-隨機(jī)數(shù))
1、基本介紹
npm地址：https://www.npmjs.com/package/uuid#api
uuid在線生成器：http://uuid.bchrt.com/
uuid指通用唯一識(shí)別碼。
UUID 是 通用唯一識(shí)別碼（Universally Unique Identifier）的縮寫，是一種軟件建構(gòu)的標(biāo)準(zhǔn)，亦為開放軟件基金會(huì)組織在分布式計(jì)算環(huán)境領(lǐng)域的一部分。其目的，是讓分布式系統(tǒng)中的所有元素，都能有唯一的辨識(shí)信息，而不需要通過中央控制端來做辨識(shí)信息的指定。
UUID 是由一組32位數(shù)的16進(jìn)制數(shù)字所構(gòu)成，是故 UUID 理論上的總數(shù)為1632=2128，約等于3.4 x 10123。也就是說若每納秒產(chǎn)生1百萬個(gè) UUID，要花100億年才會(huì)將所有 UUID 用完
格式：
UUID 的十六個(gè)八位字節(jié)被表示為 32個(gè)十六進(jìn)制數(shù)字，以連字號(hào)分隔的五組來顯示，形式為 8-4-4-4-12，總共有 36個(gè)字符（即三十二個(gè)英數(shù)字母和四個(gè)連字號(hào)）。例如：
123e4567-e89b-12d3-a456-426655440000 xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx
- 數(shù)字 M 的四位表示 UUID 版本，當(dāng)前規(guī)范有5個(gè)版本，M可選值為1, 2, 3, 4, 5 ；
- 數(shù)字 N 的一至四個(gè)最高有效位表示 UUID 變體( variant )，有固定的兩位10xx因此只可能取值8, 9, a, b；
UUID版本通過 M 表示，當(dāng)前規(guī)范有5個(gè)版本，可選值為1, 2, 3, 4, 5。這5個(gè)版本使用不同算法，利用不同的信息來產(chǎn)生 UUID，各版本有各自優(yōu)勢，適用于不同情景。具體使用的信息
2、使用
1、安裝：
npm install uuid npm install uuid --save cnpm i -S vue-uuid
2、生成一個(gè) UUID ：
import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ? '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
使用 CommonJS 語法：
const { v4: uuidv4 } = require('uuid');
uuidv4(); // ? '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'
const uuid = require('uuid') //1、引包
console.log(uuid.v1()) //2、調(diào)用 98fc11a0-dde0-11e9-ade5-25202b3a2fba
vue中使用
全局引用
1、main.js中引入
import UUID from "vue-uuid"; Vue.use(UUID);
2、使用
console.log("this.$uuid.v1():", this.$uuid.v1());
// this.$uuid.v1()：b1ef4cf0-ae0d-11eb-bed8-596efe8bfb0b
局部引用
import { uuid } from 'vue-uuid';
使用：
uuid.v1()
完整
import { v4 as uuidv4 } from ‘uuid'
const uuid = uuidv4()
this.sessionId = uuid.v4()
console.log(this.sessionId)
node中使用uuid
# 下載 cnpm i -S uuid
使用
const uuid = require('uuid')
console.log("uuid.v4()", uuid.v4())
3、api參數(shù)
| uuid.NIL | nil UUID字符串（全零） | 新進(jìn) [email protected] |
|---|---|---|
| uuid.parse() | 將UUID字符串轉(zhuǎn)換為字節(jié)數(shù)組 | 新進(jìn) [email protected] |
| uuid.stringify() | 將字節(jié)數(shù)組轉(zhuǎn)換為UUID字符串 | 新進(jìn) [email protected] |
| uuid.v1() | 創(chuàng)建版本1（時(shí)間戳）UUID | |
| uuid.v3() | 創(chuàng)建版本3（帶MD5的命名空間）UUID | |
| uuid.v4() | 創(chuàng)建版本4（隨機(jī)）UUID | |
| uuid.v5() | 創(chuàng)建版本5（帶SHA-1的命名空間）UUID | |
| uuid.validate() | 測試字符串以查看它是否為有效的UUID | 新進(jìn) [email protected] |
| uuid.version() | 檢測UUID的RFC版本 | 新進(jìn) [email protected] |
4、應(yīng)用實(shí)例
實(shí)例1
全局使用
package.json
"uuid": "^8.3.1",
main.js
import { v4 as uuidv4 } from 'uuid';
// 全局方法掛載
Vue.prototype.uuidv4 = uuidv4
使用
click(){
var temp_event = this.uuidv4();
console.log('temp_event',temp_event);
eventBus.$on(temp_event,res=>{
this.getList();
eventBus.$off(temp_event);
});
}
實(shí)例2
頁面刷新即生成一個(gè)新的 UUID ：
uuid.v4() //直接加在頁面的任意位置
打開頁面/標(biāo)簽，即生成一個(gè) UUID ，頁面刷新 UUID 不會(huì)變。
打開頁面，如果沒有UUID則生成一個(gè)存入 sessionStorage ，如果有則直接讀取sessionStorage中保存的UUID。
let uuid = sessionStorage.getItem('uuid');
if (!uuid) {
sessionStorage.setItem('uuid',uuidv4());
}
UUID長期保存，清緩存后自動(dòng)生成：
這樣我們可以將uuid存入localStorage中，可以長期保存：
let uuid = localStorage.getItem('uuid');
if (!uuid) {
localStorage.setItem('uuid',uuidv4());
}
增加登錄驗(yàn)證，未登陸狀態(tài)再生成 UUID：
if (getToken()){//判斷是否有 token
sessionStorage.removeItem('uuid'); //如果有，清除 sessionStorage 中的 uuid
} else {//未登錄狀態(tài)生成 uuid
let uuid = sessionStorage.getItem('uuid');
if (!uuid) {
sessionStorage.setItem('uuid',uuidv4());
}
}
當(dāng)然，也可以根據(jù)時(shí)間、設(shè)備信息、MD5和加鹽（Salt）等方式生成更加精確的 UUID，大家可以根據(jù)自己的需求靈活運(yùn)用。
總結(jié)
到此這篇關(guān)于vue中如何使用唯一標(biāo)識(shí)uuid的文章就介紹到這了,更多相關(guān)vue使用唯一標(biāo)識(shí)uuid內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 簡單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能
- Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡單實(shí)例代碼
- Vue通過for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例
- 基于vue實(shí)現(xiàn)圖片驗(yàn)證碼倒計(jì)時(shí)60s功能
- Vue實(shí)現(xiàn)手機(jī)號(hào)、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)）
- vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)
- Vue3+Hooks實(shí)現(xiàn)4位隨機(jī)數(shù)和60秒倒計(jì)時(shí)的示例代碼
相關(guān)文章
vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
這篇文章主要介紹了vue-cli 2.*中導(dǎo)入公共less文件的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
vue實(shí)現(xiàn)輸入框的模糊查詢的示例代碼（節(jié)流函數(shù)的應(yīng)用場景）
這篇文章主要介紹了vue實(shí)現(xiàn)輸入框的模糊查詢的示例代碼（節(jié)流函數(shù)的應(yīng)用場景），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問題
這篇文章主要介紹了解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
這篇文章主要給大家介紹了關(guān)于Vue如何在CSS中使用data定義的數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
vue項(xiàng)目中存儲(chǔ)與使用后端傳遞過來的token
vue作為一個(gè)單頁面應(yīng)用,vuex作為它的狀態(tài)管理工具,它至少是可以很好的保存這個(gè)token值,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中存儲(chǔ)與使用后端傳遞過來的token的相關(guān)資料,需要的朋友可以參考下2023-03-03
本篇文章主要介紹了詳解通過JSON數(shù)據(jù)使用VUE.JS，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue.js是JavaScript MVVM（Model-View-ViewModel）庫，十分簡潔，Vue核心只關(guān)注視圖層，相對AngularJS提供更加簡潔、易于理解的API。接下來通過本文給大家介紹vue的基本用法與常見指令，感興趣的朋友一起看看吧2017-08-08
使用el-form之表單校驗(yàn)自動(dòng)定位到報(bào)錯(cuò)位置問題
這篇文章主要介紹了使用el-form之表單校驗(yàn)自動(dòng)定位到報(bào)錯(cuò)位置問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue項(xiàng)目中使用vuedraggable,本文給大家介紹了錯(cuò)誤問題分析及解決方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vite+vue3搭建的工程熱更新失效問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03