How to use unique identification uuid in vue (uuid.v1-timestamp, uuid.v4-random number)

1. Basic introduction

npm address:/package/uuid#api

uuid online generator:/

uuid means universalUnique identification code。

UUID is the abbreviation of Universally Unique Identifier, a standard for software construction and is also part of the Open Software Foundation organization in the field of distributed computing environments. The purpose is to enable all elements in the distributed system to have unique identification information without specifying identification information through the central control end.

UUID It is composed of a set of 32-digit hexadecimal numbers, so the theoretical total number of UUID is 1632=2128, which is approximately equal to 3.4 x 10123. That is to say, if 1 million UUIDs are generated per nanosecond, it will take 10 billion years to use up all UUIDs.

Format:

The sixteen octets of the UUID are represented as 32 hexadecimal digits, displayed in five groups separated by hyphen, in the form of 8-4-4-4-12, with a total of 36 characters (that is, thirty-two English numbers and four hyphens). For example:

123e4567-e89b-12d3-a456-426655440000
xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx

• The four-digit number M represents the UUID version. There are 5 versions of the current specification, and the optional value of M is 1, 2, 3, 4, 5;
• One to four most significant bits of the number N represent the UUID variant ( variant ), with two fixed digits 10xx, so it is possible to take values ​​8, 9, a, b;

The UUID version is represented by M. There are 5 versions of the current specification, with optional values ​​of 1, 2, 3, 4, 5. These 5 versions use different algorithms and use different information to generate UUIDs. Each version has its own advantages and is suitable for different scenarios. Specific usage information

2. Use

1. Installation:

npm install uuid
npm install uuid --save
cnpm i -S vue-uuid

2. Generate a UUID:

import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

Using CommonJS syntax:

const { v4: uuidv4 } = require('uuid');
uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

const uuid = require('uuid') //1. Introduce packet(uuid.v1()) //2. Call 98fc11a0-dde0-11e9-ade5-25202b3a2fba

Used in vue

Global Quotation

1. Introduced

import UUID from "vue-uuid";
(UUID);

2. Use

("this.$uuid.v1():", this.$uuid.v1());
// this.$uuid.v1()：b1ef4cf0-ae0d-11eb-bed8-596efe8bfb0b

Local citations

import { uuid } from 'vue-uuid';

use:

 uuid.v1()

whole

import { v4 as uuidv4 } from ‘uuid'

const uuid = uuidv4()　
 = uuid.v4()
()

Use uuid in node

# downloadcnpm i -S uuid

use

const uuid = require('uuid')
("uuid.v4()", uuid.v4())

3. API parameters

4. Application examples

Example 1

Global use

  "uuid": "^8.3.1",

import { v4 as uuidv4 } from 'uuid';

// Global method mount.uuidv4 = uuidv4

use

click(){
    var temp_event = this.uuidv4();
    ('temp_event',temp_event);
    eventBus.$on(temp_event,res=>{
       ();
       eventBus.$off(temp_event);
    });
}

Example 2

Page refresh generates a new UUID:

uuid.v4() //Open directly anywhere on the page

Open the page/tag, which generates a UUID, and the page refresh UUID will not change.

Open the page, if there is no UUID, generate a stored sessionStorage, and if there is, directly read the saved UUID in sessionStorage.

let uuid = ('uuid');
if (!uuid) {
  ('uuid',uuidv4());
}

UUID is saved for a long time and will be automatically generated after clearing the cache:

In this way, we can save uuid in localStorage and can be saved for a long time:

let uuid = ('uuid');
if (!uuid) {
  ('uuid',uuidv4());
}

Add login verification, and regenerate UUID without login status:

if (getToken()){//Judge whether there is a token  ('uuid'); //If so, clear the uuid in sessionStorage} else {//Unlogged in uuid  let uuid = ('uuid');
  if (!uuid) {
    ('uuid',uuidv4());
  }
}

Of course, more accurate UUIDs can also be generated based on time, equipment information, MD5 and salt (Salt), and you can flexibly use them according to your needs.

Summarize

This is the end of this article about how to use unique uuid in vue. This is the only one. For more related content about using unique uuid in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!