He estado tratando de usar mitt dentro de mi módulo vuex pero siempre obtengo el "error de emisor no definido".
Este es mi main.js:
import { createApp } from "vue"; import App from "./App.vue"; import "@fortawesome/fontawesome-free/css/all.css"; import "@fortawesome/fontawesome-free/js/all.js"; import "@/assets/styles/index.scss"; import mitt from 'mitt' const emitter = mitt() import router from "./router"; import store from "./store"; const app = createApp(App).use(router).use(store) app.config.globalProperties.emitter = emitter app.mount("#app");Cuando trato de emitir un evento desde una acción de módulo vuex como esta:
dispatch("settingIncommingChats", socketData.incomingChats).then( () => { emitter.emit("chats_updated"); } );me sale este error:
No capturado (en promesa) ReferenceError: el emisor no está definido en websocket.js: 34: 17
Hay varias formas de hacer que una propiedad sea global en vue 3
Una de las mejores soluciones para bibliotecas externas sería crear un archivo mitt.js en un directorio de complementos con el siguiente código
import mitt from 'mitt' const emitter = mitt() export default emitterLuego puede importarlo y usarlo tanto en su tienda .js como en los archivos de plantilla .vue
import emitter from "../plugins/mitt"; emitter.emit('chats_updated')Lo que he hecho es que:
guante.js:
import mitt from 'mitt'; // Create a new emitter const emitter = mitt(); // Export that emitter export default emitter;principal.js:
// We recover the emitter import emitter from './mitt'; // Vuex Store import store from './store/store'; const app = createApp({}); app.use(store); // We make the emitter available on window object // (optional but can be handy, // if you have js files 'outside' of vue scope that needs that emitter) window.emitter = emitter; // We add a global $mitt property app.config.globalProperties.$mitt = emitter;por lo que está disponible dentro de vue con $mitt y fuera de vue con window.emitter si es necesario
Sin embargo, no tendrá acceso a propiedades definidas globalmente dentro de una acción vuex, por lo que deberá importarla:
import emitter from '@/mitt'; const actions = {}; export default actions;la desventaja de esto es que no es la misma instancia, es una nueva y puede causar problemas