时间戳

首页 > 解决方案 > 如何在入口 js 中包含 JS 并从其他组件访问它

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

问题描述

我希望能够在我的 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），然后从任何地方调用它。

标签： vue.jssocket.iovuejs2vue-routervue-cli

解决方案

你可以将你的 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)
    }
}

推荐阅读