单例模式设计——Vue单例组件实现实例

前言

单例模式，顾名思义就是只有一个实例。在 Vue 中，应用到该设计模式的有 vuex、vue-route 等。

相关的设计模式和实现在网上可以找到很多教程，这里不做赘述。

在系统中，适合单例模式使用场景最常用的功能要算是登录了，本章节单讲登录弹窗的单例实现。

技术栈

vue 脚手架项目 + elementUI

elementUI 并非必要，样式和对话框样式可自己实现。

实现

在 components 中新建文件夹命名 loginDialog。在该目录下新建 index.js 和 LoginDialog.vue。

LoginDialog.vue

<template>
  <el-dialog title="登录" :visible.sync="visible" width="30%" @close="visible = false">
    <el-form ref="form" label-width="80px">
      <el-form-item label="账号">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" type="password"></el