Vue JS 组件中如何使用全局变量？答案

【问题标题】：How to use global variables in Vue JS components?Vue JS 组件中如何使用全局变量？
【发布时间】：2020-04-18 10:59:14
【问题描述】：

我正在尝试使用 Vue JS 开发一个网络应用程序。单个文件组件（.vue 文件）是创建组件的好方法，但我不想使用任何节点模块。我找到了https://github.com/FranckFreiburger/http-vue-loader，它可以让我直接从我的 html/js 加载 .vue 文件。

我正在尝试将实时数据从 websocket 填充到组件内部的 html 表中。现在我想为多个组件使用相同的 websocket 数据。我创建了 websocket 和一个全局变量来存储组件外部的数据（即在 app.js 中）。现在我在我的组件中使用这个变量来进行实时数据更新。但是虽然我正在接收数据，但 html 表没有得到更新。

这个想法是创建一个 websocket 并将数据用于多个组件。

我实际上是 Vue 框架的新手，如果有任何理解问题，请见谅。

这是我的示例代码：

index.html

<!DOCTYPE html>
<html>

<body>
  <div id="app">
        <div>
          <comp1></comp1>
          <comp1></comp1>
        </div>
  </div>

  <script src="js/vue.js"></script>
  <script src="js/httpVueLoader.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

app.js

var global_data = [];
var ws = new WebSocket("ws://127.0.0.1:9012/ws");
ws.onmessage = msg => {
   global_data = JSON.parse(msg.data);
   console.log(global_data);
};

new Vue({
  el: "#app",
  components: {
    'comp1': httpVueLoader('js/component1.vue')
  },
  data: {

  }
});

component1.vue

<template>
  <div>
    <table id="tm_table" class="content-table">
      <thead>
        <th>Parameter</th>
        <th>Value</th>
      </thead>
      <tbody>
        <tr v-for="(parameter, id) in rt_data.params" :key="id">
          <td>{{parameter.param}}</td>
          <td>{{parameter.value}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      rt_data: global_data,
    };
  }
};
</script>

<style>
</style>

高度赞赏解决此问题的任何帮助，甚至对任何不同方法的建议。谢谢。

【问题讨论】：

任何不使用vuex的方法？

标签： javascript vue.js websocket vue-loader http-vue-loader

【解决方案1】：

不使用 Vuex.. 您可以将全局变量保留在父组件中，然后将它们作为道具传递。或者，您可以将内容存储在浏览器的本地存储中，然后在需要时从组件中访问它们。这将作为一种设置全局变量的方式，现在已被广泛采用。

【讨论】：