Vue中在mixin内调用全局登录模态框报ModalLogin未定义如何解决

问题原因 #

你遇到的报错和无法正常调用模态框的问题是三个错误共同导致的：

• 导入路径错误：你在mixin中写的import ModalLogin from '@/components'导入的是components目录下的入口文件（通常是index.js），不是ModalLogin组件本身，自然会报ModalLogin is not defined的错误。
• 调用方式错误：就算你导入了正确的ModalLogin组件配置对象，直接调用ModalLogin.methods.show()也是无效的，这里的methods是组件的静态配置，不是运行时实例的可调用方法，只有组件完成实例化之后才能调用它定义的方法。
• 方法名不匹配：你的ModalLogin组件内定义的显示方法是showModal，不是你调用的show，名称对应不上也会触发报错。

另外你给组件做的全局注册，只是允许你在任意组件模板中直接使用<modal-login>标签，不会自动生成可直接调用的组件实例。

解决方案 #

这里提供两种最常用的实现方案，按需选择即可：

方案1：事件总线实现（适合中小型项目）

1. 先在项目入口文件main.js中注册全局事件总线：

// main.js 新增代码
Vue.prototype.$bus = new Vue()

2. 修改ModalLogin组件，监听全局打开模态框的事件：

// ModalLogin.vue 的script部分新增生命周期钩子
export default {
  // 原有代码保持不变
  mounted() {
    // 监听打开登录框事件
    this.$bus.$on('openLoginModal', () => this.showModal())
  },
  beforeDestroy() {
    // 销毁前解绑事件，避免内存泄漏
    this.$bus.$off('openLoginModal')
  }
}

3. 你需要在项目的根组件（通常是App.vue）的模板中添加一次全局注册的登录组件，保证它完成实例化：

<!-- App.vue template 中新增 -->
<modal-login />

4. 修改你的authService mixin，直接触发全局事件即可，不需要再导入ModalLogin组件：

export default {
  methods: { 
    authorizedGet(url) {
      if(!localStorage.getItem('user')) {
        // 触发事件打开登录框
        this.$bus.$emit('openLoginModal')
      } else {
        // 原有业务逻辑
      }
    }
  }
}

方案2：全局挂载插件实现（不需要在模板中提前放置组件）

1. 新建@/components/LoginModalPlugin.js文件，封装模态框为全局可调用插件：

import Vue from 'vue'
import ModalLogin from './ModalLogin.vue'

// 创建组件构造器
const LoginModalCtor = Vue.extend(ModalLogin)
let loginModalInstance = null

const openLoginModal = () => {
  // 单例模式，避免重复创建实例
  if (!loginModalInstance) {
    loginModalInstance = new LoginModalCtor()
    // 挂载组件到body
    loginModalInstance.$mount()
    document.body.appendChild(loginModalInstance.$el)
  }
  loginModalInstance.showModal()
}

export default {
  install(Vue) {
    // 挂载到Vue原型，所有组件/混入都可以直接调用
    Vue.prototype.$openLoginModal = openLoginModal
  }
}

2. 在main.js中注册该插件：

import LoginModalPlugin from '@/components/LoginModalPlugin.js'
Vue.use(LoginModalPlugin)

3. 修改mixin直接调用全局方法即可：

export default {
  methods: { 
    authorizedGet(url) {
      if(!localStorage.getItem('user')) {
        this.$openLoginModal()
      } else {
        // 原有业务逻辑
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Florent06