electron + vue3 实现window唯一标识

在 Electron (基于 Node.js 的桌面应用框架) 和 Vue3 中实现窗口的唯一标识，通常需要结合浏览器的全局唯一标识符（如 `window` 对象的 `navigator.userAgent` 或者 `window.localStorage`）。你可以创建一个自定义属性或者存储到本地，当新窗口打开时，检查这个标识是否已存在。

以下是一个简单的步骤：

1. 在 Vue 组件中设置一个全局变量或计算属性，用于存储窗口 ID：

// main.js 或其他全局文件
import { createApp } from 'vue'
import App from './App.vue'

const isElectron = () => /^win/.test(navigator.userAgent.toLowerCase())
if (isElectron()) {
  window.ElectronWindowId = Math.random().toString(36).substring(7); // 随机生成唯一ID
}

createApp(App)
  .mount('#app')

2. 在 Vue 组件中获取或更新这个标识：

<template>
  <div>
    <p>当前窗口 ID: {{ windowUniqueId }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

function getWindowUniqueId() {
  return window.ElectronWindowId || localStorage.getItem('windowUniqueId') || generateNewUniqueId();
}

function generateNewUniqueId() {
  return Math.random().toString(36).substring(7);
}

const windowUniqueId = ref(getWindowUniqueId());
onMounted(() => {
  // 如果本地未存过，首次加载就生成并保存到localStorage
  if (!localStorage.getItem('windowUniqueId')) {
    localStorage.setItem('windowUniqueId', windowUniqueId.value);
  }
});
</script>

当你有新的窗口实例化时，会根据全局标识判断是否已经存在，如果没有则会生成一个新的，并且在本地存储以便后续窗口访问。