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

Question

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

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

我试过包含

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

您可以将袜子绑定到 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)
    }
}

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

How can i include a JS in entry js and access it from other components

socket.io

vue.js

vue-router

vuejs2

vue-cli