如何在 Vue JS 組件中使用全局變量？

Question

我正在嘗試使用 Vue JS 開發一個網絡應用程序。 單文件組件（.vue 文件）是創建組件的好方法，但我不想使用任何節點模塊。 我發現https://github.com/FranckFreiburger/http-vue-loader允許我直接從我的 html/js 加載 .vue 文件。

我正在嘗試將來自 websocket 的實時數據填充到組件內部的 html 表中。 現在我想對多個組件使用相同的 websocket 數據。 我創建了 websocket 和一個全局變量來存儲組件外部的數據（即，在 app.js 中）。 現在我在我的組件中使用這個變量來進行實時數據更新。 但是，盡管我正在接收數據，但 html 表並沒有得到更新。

這個想法是創建一個單一的 websocket 並將數據用於多個組件。

我實際上是 Vue 框架的新手，所以如果有任何理解問題，請原諒。

這是我的示例代碼：

索引.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>

應用程序.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>

任何解決此問題的幫助，甚至對任何不同方法的建議都非常感謝。 謝謝你。

Answer 1

不使用 Vuex .. 您可以將全局變量保留在父組件中，然后將它們作為道具傳遞。 或者，您可以將內容存儲在瀏覽器的本地存儲中，然后在需要時從組件訪問它們。 這將作為一種設置全局變量的方式，現在已經被廣泛采用。

如何在 Vue JS 組件中使用全局變量？

問題描述

1 個解決方案

解決方案1
1 2019-12-29 09:52:16

如何在 Vue JS 組件中使用全局變量？

問題描述

1 個解決方案

解決方案1 1 2019-12-29 09:52:16

解決方案1
1 2019-12-29 09:52:16