4

我目前正在使用 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共享不一样this.$storeloginWindow.close()

有什么方法可以将它传递Vuex this.$store到我的新窗口，这样我就不必mainWindow不断地隐藏它，改变它的视图，而且我希望能够拥有其他依赖的窗口（朋友列表等）关于Vuex国家。

希望这不会太令人困惑，如果您需要澄清只是问。谢谢。

4

3 回答 3

1

考虑到您在每次交互中都使用电子的 BrowserWindow 的事实，我会使用 ipc 通道通信。

这是主进程

import { ipcMain } from 'electron'
let mainState = null

ipcMain.on('vuex-connect', (event) => {
  event.sender.send('vuex-connected', mainState)
})

ipcMain.on('window-closed', (event, state) => {
  mainState = state
})

然后，我们需要为 Vuex 商店创建一个插件。我们称之为ipc。这里有一些有用的信息

import { ipcRenderer } from 'electron'
import * as types from '../../../store/mutation-types'

export default store => {
  ipcRenderer.send('vuex-connect')

  ipcRenderer.on('vuex-connected', (event, state) => {
    store.commit(types.UPDATE_STATE, state)
  })
}

在此之后，使用 store.commit 更新整个存储状态。

import ipc from './plugins/ipc'
var cloneDeep = require('lodash.clonedeep')

export default new Vuex.Store({
  modules,
  actions,
  plugins: [ipc],
  strict: process.env.NODE_ENV !== 'production',
  mutations: {
    [types.UPDATE_STATE] (state, payload) {
      // here we update current store state with the one
      // set at window open from main renderer process
      this.replaceState(cloneDeep(payload))
    }
  }
})

现在它仍然在触发关闭窗口或任何其他您想要的事件时发送 vuex 状态。将它放在您可以访问存储状态的渲染器进程中。

ipcRenderer.send('window-closed', store.state)

请记住，我没有专门测试过上述场景。这是我在生成新 BrowserWindow 实例并在它们之间同步 Vuex 存储的应用程序中使用的东西。

问候

于 2017-10-26T14:48:06.577 回答
1

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

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

然后，您只需将 currentView 设置为组件名称，它就可以完全访问您的 Vuex 存储，同时只安装/显示您想要的视图。

但是，当您正在研究它时，我相信应该可以将 store 的值传递loginWindow给，mainWindow但它不是一个纯粹的 Vue 解决方案。

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

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

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

于 2016-11-18T09:06:41.987 回答
0

GuyC 关于使应用程序完全单页的建议是有道理的。尝试使用 vue-router 来管理 SPA 中路由之间的导航。

而且我有一个粗略的解决方案来做你想做的事，它节省了导入类似 vue-router 的工作，但是通过配置的路由替换页面中的组件总是比加载新页面更顺畅：当打开一个新窗口时，我们有它window对象，我们可以将共享状态设置为window的会话存储（或一些全局对象），然后让 vuex 在新窗口中检索它，例如created() {if(UIDNotInVuex) tryGetItFromSessionStorage();}. 这created是一些组件创建的钩子。

于 2016-11-18T09:54:54.343 回答