Vue生成唯一id

精简版

安装nanoid库（实际上就是一个函数） ，是简化版的uuid。

npm  i  nanoid

使用方式：

<script>
import {nanoid} from "nanoid";

export default {
  name: "MyHeader",
  methods: {
    add(event) {
      const obj = { id: nanoid(), title: event.target.value, done: "false" };
      console.log(obj);
    },
  },
};

完整版

在很多应用场景中，我们经常需要生成唯一ID来作为数据的标识。nanoid 是一个轻量级、高性能的库，可以帮助我们生成这些独特的ID。在本篇文章中，我们将简要介绍 nanoid，并演示如何在Vue项目中使用它。

什么是 nanoid？

nanoid 是一个小巧且快速的JavaScript库，用于生成各种长度的全局唯一标识符 (GUID)。它的长度可自定义，默认长度为 21 个字符。与其他类似库相比，nanoid 在生成随机数的过程中使用了一种更佳安全的方法，使得产生 重复ID 的概率变得微乎其微。

安装 nanoid

首先，我们需要在 Vue 项目中安装 nanoid。打开你的终端，然后输入以下命令：

npm install nanoid

或者，如果你正在使用 yarn 作为包管理器：

yarn add nanoid

在 Vue 项目中使用 nanoid

让我们通过一个简单的例子来展示如何在 Vue 项目中使用 nanoid。

假设我们在创建一个待办事项应用，其中每个待办事项都有一个唯一的ID。首先，我们需要在项目中引入 nanoid：

// 引入 nanoid
import { nanoid } from 'nanoid';

接下来，在 Vue 实例的 methods 或 computed 属性中，我们可以使用 nanoid 函数生成唯一ID：

methods: {
  // 创建一个待办事项
  createTodo: function(newTodo) {
    const taskId = nanoid(); // 生成唯一ID
    // 将带有唯一ID的新待办事项添加到列表中
    this.todos.push({
      id: taskId,
      task: newTodo,
    });
  }
}

这样，每当我们创建一个新的待办事项时，createTodo 函数都会为其生成一个唯一的ID。

总结

nanoid 是一个轻量级、高性能的库，可以帮助我们在 Vue 项目中轻松生成独特的全局唯一ID。它允许自定义长度，且拥有较低的重复ID概率。通过简单的引入和一行代码，我们就可以方便地在 Vue 项目中使用 nanoid 进行ID的生成。