如何在两个 Vue 根之间发送和接收数据？答案

【问题标题】：How to send and receive data between two Vue roots?如何在两个 Vue 根之间发送和接收数据？
【发布时间】：2019-11-24 13:15:37
【问题描述】：

app.html

<script defer src='app.js'></script>
<script defer src='plugin.js'></script>

<div id='app'></div>
<div id='plugin'></div>

app.js

const store = new Vuex.Store({
    state:{
        hi:'hi'
    }
})

const app = new.Vue({
    el:'#app',
    store
})

plugin.js

const plugin = new.Vue({
   mounted(){
       console.log('How can I get hi in store?')
   }
})

我想使用 Vuex 从从不同文件加载的 Vue 实例中检索数据。我必须使用这种方法，因为每个页面的插件都不同，并且它们是动态加载的。

但是 rootState 似乎无法获取应用的状态，因为 root 不同。有没有办法使用 windows、mixin 或其他一些全局对象或方法来访问数据？

【问题讨论】：

这两个 Vue 实例在同一个页面上吗？另见forum.vuejs.org/t/…
在建议中，他使用了同一家商店。但是，在我的情况下，它不使用同一个商店，因为它是从另一个脚本加载的。如果是这样，我是否必须按照建议使用 localStorage？
如果你想从同一个域上的两个不同的文件进行通信，你可以使用 localStorage/sessionStorage/indexedDB 来相互通信。在一个网站上，您通常只能访问该页面的数据，而不能访问同一域中的任何其他页面的数据。因此，如果这个 Vue 实例被加载到另一个 HTML 页面上，那么您将无法访问该页面上的任何内容（包括 Vuex 商店）。

标签： vue.js state vuex

【解决方案1】：

如果您想要“共享状态”，当然可以使用 localStorage，但您的问题更多地涉及“传递”数据。在这种情况下，您可以使用事件发射器和侦听器。由于窗口有一个Event Api，你可以这样做：

// rootA - emitter
{
  methods: {
    emitDataToComponentB (a, b, c) {
       const event = new CustomEvent('someEvent', { ...arguments })
       window.dispatchEvent(event)
    }
  }
}

// rootB - listener
{
  created () {
    this.listen()
  },

  methods: {
    listen () {
      window.addEventListener('someEvent', (args) => {
        console.log('@someEvent', args)
    }
  }
}

注意：仅需要满足所示需求的代码。您需要确保在适当的时间分离任何侦听器（例如rootB.beforeDestroy()）

【讨论】：