制作全局插件，我可以在应用程序中的任何地方使用

Question

我有这个套接字类。有什么办法可以让它在全球范围内普及吗？我想在我的应用程序中的任何地方访问功能，例如$socket.methodName()

我尝试过的

class InitSocket {
constructor(options) {
this.options = options;
}
connect() {
console.log(this.options);
}
}
export default {
install: (Vue, options) => {
Vue.prototype.$socket = new InitSocket(options);
},
};

在main.js 中

const { createApp } = require('vue');
import App from "./App.vue";
import Sockets from './plugins/Socket'
const app = createApp(App);
app.use(Sockets , "test");
app.mount("#app");

但我收到了这个信息Cannot set properties of undefined (setting '$socket')-我做错了什么？

Answer 1

在Vue 3中，您可以拥有多个应用程序，并且不能再添加到Vue原型中。

要编写和使用插件，请执行以下步骤：

步骤1：创建插件

export default {
install: (app, options) => {
class InitSocket {
constructor(options) {
this.options = options;
}
connect() {
console.log(this.options);
}
}

// inject a globally available $socket() method
app.config.globalProperties.$socket = new InitSocket(options)
}
}

步骤2：导入并安装在main.js中

import { createApp } from 'vue'
import App from "./App.vue";
import Sockets from './plugins/Socket'
const app = createApp(App);
app.use(Sockets , "test");
app.mount("#app");

阅读更多Vue文档：插件