Currently, I am utilizing VueJs and mitt for the eventBus. The mitt is globally loaded and functioning correctly as shown below:
main.js
const emitter = mitt();
const app = createApp(App)
app.config.globalProperties.emitter = emitter
I am able to call the eventBus in all components successfully like this: this.emitter.emit('eventName', data)
However, I encountered an issue when trying to use it within an axios interceptor, resulting in an error (undefined).
My client.js (axios instance) is structured as follows:
const client = axios.create({
// withCredentials: true,
baseURL: ((authenticated.data.domain !== null) ? authenticated.data.domain : 'http://mydomain.test/api')
});
client.interceptors.response.use((response) => {
// the problem occurs here
this.emitter.emit('alert', response.data);
return response;
}, (error) => {
return Promise.reject(error.message);
});
export default client;