Question

我想在电子的 main.js 中存储一些数据，以便它可以由运行 vue.js 的窗口反应性地显示。我已经在 store/index.js 内声明了一个商店，包括状态和突变。这在从电子和 vue 访问时确实有效，但不会在这些上下文之间共享数据。所以基本上 vue 不会得到电子内提交的数据。

如何从我的主要电子环境提交到商店，并在我的 vue 窗口中反应性地显示更改？

store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    state: {value: ''},
    mutations: {
        set: (state, payload) => {
            state.value = payload;
        }
    }
});

main.js

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

App.vue

<template>
  <div>
    {{ $store.state.value }}
  </div>
</template>

<script>
import store from "./store";

export default {
  data: () => ({
  }),
  created() {
    // Commiting here displays the value
    store.commit("set", 'dummy1');
  }
}
</script>

背景.js

'use strict'
import store from "./store";
import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  createWindow()
  // Commiting here does not display the changes
  store.commit("set", 'dummy2');
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

我怀疑这实际上创建了两个不共享其内容的独立商店

Answer 1

<块引用>

这实际上创建了两个独立的确切地。在 2 个不同的进程中。

但这里有两种可能的方法：

使用 IPC communicate between Renderer and Background
试试这个包 vuex-electron（它也在幕后使用 IPC）

在 vue 和电子之间共享一个商店

1 个答案: