如何在入口 js 中包含 JS 并从其他组件访问它

Question

我希望能够在我的 Vue 组件中使用 Socket.IO 实例，我不想在每个组件文件中都使用import io from 'socket.io-client'，所以我认为我应该能够将它导入到我的“main. js”文件并在其他任何地方使用它。

到目前为止，我已经看到了几个答案，但似乎没有一个有效

我已尝试包含

import io from 'socket.io-client'
...

var sock = io('localhost:3000')

export const globalStore = new Vue({
  data: {
    sock: sock
  }
})

在我的 main.js 中并像这样调用它

import {globalStore} from '../main.js'

const SOCK = globalStore.sock

但我仍然得到 Uncaught ReferenceError: sock is not defined at Object.login

当我尝试做的时候

SOCK.emit()

我希望能够包含一个 JS 文件（不仅仅是 socket.io）一次，然后从任何地方调用它。

Answer 1

你可以将你的 sock 绑定到 VueJS 原型：

// main.js file

import Vue from 'vue'
import io from 'socket.io-client'

const sock = io('localhost:3000')

Vue.prototype.$sock = sock

new Vue({
    ...
})

然后您可以像这样在组件中访问它：

export default {
    created () {
        console.log(this.$sock)
    }
}