I have been trying to use mitt inside my vuex module but I always get the "emitter is not defined error".
This is my 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");
When I try to emit an event from a vuex module action like this:
dispatch("settingIncommingChats", socketData.incomingChats).then(
() => {
emitter.emit("chats_updated");
}
);
I get this error:
Uncaught (in promise) ReferenceError: emitter is not defined at websocket.js:34:17
There is multiple ways to make a property global in vue 3
One of the best solution for external libs would be to create a mitt.js file in a plugins directory with the following code
import mitt from 'mitt'
const emitter = mitt()
export default emitter
Then you can import and use it in both your .js store and .vue template files
import emitter from "../plugins/mitt";
emitter.emit('chats_updated')
What i have done is that :
mitt.js :
import mitt from 'mitt';
// Create a new emitter
const emitter = mitt();
// Export that emitter
export default emitter;
main.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;
so it's available inside vue with $mitt and outside vue with window.emitter if you need to
You will not have access to globally defined properties inside a vuex action though, so you will need to import it :
import emitter from '@/mitt';
const actions = {};
export default actions;
the downside to this is that it's not the same instance, it's a new one, and it can cause issues