我正在尝试使用 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: {
}
});
组件1.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.. 你可以将全局变量保留在父组件中，然后将它们作为 props 传递下去。或者，您可以将内容存储在浏览器的本地存储中，然后在需要时从组件访问它们。这将作为设置全局变量的一种方式，并且现在已被广泛采用。
关于javascript - 如何在Vue JS组件中使用全局变量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59518264/