Question

我正在尝试使用Vue JS开发一个Web应用程序。单个文件组件（.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>

对于解决此问题的任何帮助，甚至对任何其他方法的建议，都受到高度赞赏。谢谢。

Answer 1

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

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

1 个答案: