vue.js - Vuex 和 Electron 将状态转移到新窗口

Question

我目前正在使用 Electron 构建一个应用程序，到目前为止它非常棒。

我正在使用 Vue.js 和 Vuex 来管理我的应用程序的主要状态，主要是用户状态(配置文件和已验证等...)

我想知道是否可以打开一个新窗口，并具有与主窗口相同的 Vuex 状态，例如

如果用户未通过身份验证，我目前会在应用启动时显示一个登录窗口，这工作正常。

function createLoginWindow() {
  loginWindow = new BrowserWindow({ width: 600, height: 300, frame: false, show: false });
  loginWindow.loadURL(`file://${__dirname}/app/index.html`);
  loginWindow.on('closed', () => { loginWindow = null; });
  loginWindow.once('ready-to-show', () => {
    loginWindow.show();
  })
}

用户完成登录表单，如果成功则触发此功能:

function showMainWindow() {
  loginWindow.close(); // Also sets to null in `close` event
  mainWindow = new BrowserWindow({width: 1280, height: 1024, show: false});
  mainWindow.loadURL(`file://${__dirname}/app/index.html?loadMainView=true`);
  mainWindow.once('resize', () => {
    mainWindow.show();

  })
}

一切正常，唯一的问题是，mainWindow 与其 loginWindow 不共享相同的 this.$store那是 .close()

有什么方法可以将 Vuex this.$store 传递到我的新窗口，这样我就不必将所有内容都塞进 mainWindow 中，而不得不不断地隐藏它，改变它的 View ，另外我希望能够有依赖于 Vuex 状态的其他窗口( friend 列表等)。

希望这不会太困惑，如果您需要澄清，请直接提问。谢谢。

Answer 1

虽然我可能会看到您如何执行此操作，但我会添加免责声明，因为您使用的是 Vue，因此您不应该这样做。相反，我会使用 vue 组件来构建这些单独的 View ，然后您可以在 SPA 中实现您的目标。组件也可以是动态的，这可能有助于解决将它们隐藏在主窗口中的问题，即

<component v-bind:is="currentView"></component>

然后你只需将 currentView 设置为组件名称，它就可以完全访问你的 Vuex 存储，同时只挂载/显示你想要的 View 。

然而，当你正在研究它时，我相信应该可以将 loginWindow 中的商店值传递给 mainWindow 但它不会是一个纯 Vue解决方案。

而是在 loginWindows Vue 实例中创建一个方法，该方法输出一个普通对象，其中包含您要传递的所有 key: value 状态。然后将 loginWindows 变量设置为 mainWindow 中的全局变量，这将允许它在其存储中更新这些值。即

# loginWindow Vue model
window.vuexValuesToPass = this.outputVuexStore()
# mainWindow
var valuesToUpdate = window.opener.vuexValuesToPass

然后在 mainWindows Vue 实例中，您可以设置一个操作来使用您传递给它的所有值更新商店