Creé un mixin authService para llamar a mi API como usuario registrado (usando su token).
import ModalLogin from '@/components'; export default { components: { ModalLogin }, data: function () { return { } }, methods: { authorizedGet(url) { if(!localStorage.getItem('user')) { ModalLogin.methods.show() } else { // ... } } } }En ese mixin, si el usuario no está autenticado, me gustaría abrir mi formulario de inicio de sesión modal desde un componente (definido como un componente global).
Pero, cuando intenta hacer "show()", obtengo:
ModalLogin no está definido
EDITAR:
Aquí está mi componente ModalLogin:
<template> <!--Form modal--> <!-- ... --> </template> <script> import User from '../models/user'; export default { name: "modalLogin", data() { return { user: new User('', ''), loading: false, message: '' }; }, methods: { handleLogin() { this.loading = true; this.$validator.validateAll().then(isValid => { if (!isValid) { this.loading = false; return; } if (this.user.username && this.user.password) { this.$store.dispatch('auth/login', this.user).then( () => { this.$router.push('/profile'); }, error => { this.loading = false; this.message = (error.response && error.response.data) || error.message || error.toString(); } ); } }); }, showModal() { this.$refs['login-modal'].show() } } } </script> <style> </style>...que se define como Global a partir de más componentes:
// ... import ModalLogin from '@/components/ModalLogin.vue'; // ... /** * You can register global components here and use them as a plugin in your main Vue instance */ const GlobalComponents = { install(Vue) { // ... Vue.component(ModalLogin.name, ModalLogin); // ... } };exportar componentes globales predeterminados;