Error: [Vuex Electron] Reached timeout waiting for renderer to connect

[klakhov]

Hello! I'm trying to use this plugin in my electon app.
Basically I have component where I want to do some stuff, change state and then send message to main process

App.vue:

<template>
  <div id="app">
    <button v-on:click="setUser()">set user</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    setUser(){
      // do some stuff and change state
      this.$store.commit('setUsername', 'user');
      window.ipcRenderer.send("start");
    }
  }
}
</script>

When I create my window, I attach listener to start channel where i want to get access to changed state.
background.js:

app.on('ready', async () => {
  createWindow();
  ipcMain.on("start", async function(){
    const store = await PersistedState.getStoreFromRenderer();
  })
})

But I got timeout error:

UnhandledPromiseRejectionWarning: Error: [Vuex Electron] Reached timeout while waiting for renderer to connect.
    at Timeout.eval [as _onTimeout] (webpack:///./node_modules/vuex-electron-store/lib/index.js?:176:20)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)

My store looks like that:

import Vue from 'vue'
import Vuex from 'vuex'

import PersistedState from 'vuex-electron-store'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
             username: ''
    },
    mutations: {
        setUsername(state, payload){
            state.username = payload;
        }
    },
    plugins: [
		PersistedState.create({ dev: true, ipc: true, paths: ['username']})
    ],
})

If i try to get access to store in main process not in the listener, everthing works fine. But I need to call this code after user action.

[BetaHuhn]

Hi @klakhov,

the problem is how or more precisely when you are using PersistedState.getStoreFromRenderer();.

It basically initialises the IPC listeners in the main process which will be connected to once you call this.$store.commit('setUsername', 'user'). You are only initializing the listeners after window.ipcRenderer.send("start") was called which means at the point where the renderer tries to connect to the main process with .commit() it is not listening yet.

To fix this, move const store = await PersistedState.getStoreFromRenderer() out of the ipcMain.on("start") IPC event listener so vuex-electron-store can initialise the listeners before the renderer tries to send an event:

app.on('ready', async () => {
   createWindow();
+  const store = await PersistedState.getStoreFromRenderer();
   ipcMain.on("start", async function(){
-   const store = await PersistedState.getStoreFromRenderer();
+   const state = await store.getState()
   })
})

I hope this makes sense, let me know if you have any questions.

Edit:

If i try to get access to store in main process not in the listener, everthing works fine. But I need to call this code after user action.

This will only work if you make sure that PersistedState.getStoreFromRenderer() is called before the store tries to connect to the main process.