时间戳

首页 > 解决方案 > 另一个 vuejs 应用程序中的 vuejs 调用方法（单独的窗口）

javascript - 另一个 vuejs 应用程序中的 vuejs 调用方法（单独的窗口）

问题描述

我有两个 vuejs 应用程序实例，它们在两个单独的浏览器窗口中打开。我想在两者之间进行交流，通过方法传递简单的数据。

使用纯JS，可以在窗口B的页面上声明一个函数，然后从窗口A调用。

窗口 A（纯 JS）：

var windowReference = null;
function openWindow() {
    windowReference = window.open("../path-to-win-b.html", "myWin");
}

function callFunctionInWindowB() {
    //Invoked by some element.onclick()
    windowReference.method();
}

窗口 B（普通 JS）：

function method() {
    alert("hello");
}

我如何对 vuejs 做同样的事情？我会在每个窗口上运行一个单独的应用程序实例。

窗口 A（VueJS）：

var app = new Vue({
    data() : {
       windowReference: null
    },
    methods : {
      openWindow() {
          this.windowReference = window.open("../route-to-window-b", "myWin");
      },
      callMethodInWindowB() {
          //Invoked by some element.onclick()
          //This line does not work
          this.windowReference.app.handleMethodCall();

          //These lines do work, but I don't think this is the way it's designed to be called:  I came up with this by examining the object model in Chrome's debugger.
          var app = this.windowReference.app;
          var vueComponent = app.__vue__;
          var childVueComponent = vueComponent.$children[0];
          childVueComponent.handleMethodCall(timeValue);
      }
    }
});

窗口 B (VueJS)：

var app = new Vue({
    data() : {

    },
    methods : {
      handleMethodCall() {
         alert("Hello from window B");
      }
    }
});

似乎我需要获取 vue 应用程序的句柄，然后找到调用该方法。

我这样做的原因是因为 windowB 包含一个视频流媒体，我希望能够在 windowB 上使用全屏并在另一台监视器上使用 windowA 来输入数据。提前致谢！

标签： javascriptvue.jsvuejs2

解决方案

我建议您使用外部消息代理应用程序

您有很多选择，但（我）认为最好的两个是

redis https://redis.io/

它是一个非常快的内存服务器，可以侦听 IP:PORT，而且设置和使用也非常简单。它的主要限制是主要用于少量数据，即键：值。如果您在内部网络上并且无法访问第 3 部分解决方案，或者您只是不想花任何钱，这也是理想的选择。

或者

google Firestore https://firebase.google.com/docs/firestore/rtdb-vs-firestore 它几乎在所有方面都提供了更多的灵活性，它持久化了数据，任何连接到它的客户端都会实时更新。理想情况下，您将通过 vuex 连接它，然后您的所有 UI 变量将随着 firestore 上的数据发生变化而更新。如果您不存储太多数据，它可以是免费的，但是配置起来比较困难。

将 App A 连接到商店并向其写入数据后，您只需让 App B 轮询商店以查找更新，使用 Firestore，您甚至不必轮询，数据将被推送到应用程序中。

推荐阅读