Vue JS 组件中如何使用全局变量？
Posted
技术标签:
【中文标题】Vue JS 组件中如何使用全局变量？【英文标题】：How to use global variables in Vue JS components? 【发布时间】：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的方法？ 【参考方案1】：不使用 Vuex.. 您可以将全局变量保留在父组件中，然后将它们作为道具传递。或者，您可以将内容存储在浏览器的本地存储中，然后在需要时从组件中访问它们。这将作为一种设置全局变量的方式，现在已被广泛采用。
【讨论】：
以上是关于Vue JS 组件中如何使用全局变量？的主要内容，如果未能解决你的问题，请参考以下文章