在Vue项目中建立文件保存全局变量和方法

在做Vue项目中经常会遇到某些方法或变量、常量需要跨组件调用，使用时不能再组件内局部声明，这是后就需要有一个地方来单独的存放这些全局的变两或方法，下面我就简单接介绍一下这个全局文件建立的大概流程以及调用方法；

第一步：新建一个.vue的文件来保存全局变量或方法；我建立的文件名为global.vue;内容如下

<script>
  const websocket = new window.WebSocket("ws://192.xxx.0.xx:xxxx");


  const doSend = function (message) {
    writeToScreen("SENT: " + message);
    websocket.send(message);
  };

  const writeToScreen = function (message) {
    console.log(message);
  };
  export default {
    websocket,
    doSend,
    writeToScreen

  }
</script>

文件内保存了一个常量和三个方法，方法使用const以声明常量的方式来声明是为了保证在项目内方法名不会再次被声明占用；

第二步：在main.js中引入和声明；

import global_ from './components/Global'//引用文件
Vue.prototype.GLOBAL = global_ //挂载到Vue实例上面

注：如果不是很多组件都需要调用global文件内的方法的话，就可以不在main.js内引入声明，只需要在使用的组件内引入声明即可；

第三步：在组件内使用

使用时直接调用即可，我项目中的使用实例如下

userList: function () {
        let curSession = sessionStorage.getItem("sessionId");
        let userListRequest = {
          "command": 1026,
          "session": curSession,
          "request": null
        };
        this.GLOBAL.doSend(JSON.stringify(userListRequest));
      },