在Vue 3的Vuex模块操作中使用mitt

Question

我一直试图在我的vuex模块内使用手套，但我总是得到"发射器未定义错误"。

这是我的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");

当我尝试像这样从vuex模块动作发出事件时:

dispatch("settingIncommingChats", socketData.incomingChats).then(
() => {
emitter.emit("chats_updated");
}
);

我得到这个错误:

Uncaught (in promise) ReferenceError: emitter is not defined在websocket.js: 34:17

Answer 1

我做的是:

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;

所以它可以在vue内部使用$mitt，在vue外部使用window。发射器，如果你需要

您将无法访问vuex操作中全局定义的属性，因此您需要导入它:

import emitter from '@/mitt';
const actions = {};
export default actions;

这样做的缺点是它不是同一个实例，它是一个新的实例，它可能会导致问题

Answer 2

在value 3中有多种方法使属性全局

外部库的最佳解决方案之一是在插件目录中创建一个mitt.js文件，代码如下

import mitt from 'mitt'
const emitter = mitt()
export default emitter

然后你可以在你的。js store和。vue模板文件中导入和使用它

import emitter from "../plugins/mitt";
emitter.emit('chats_updated')