HowTo: Using vuex for communication

[regenrek]

Hi,

I'm struggling to solve a vuex communication between main + renderer.

The use case seems pretty simple:

Trigger vuex store.dispatch() when a specific item in the menubar is clicked.

For example click on "about" - open modal (triggered by vuex) in renderer process.

I'm looking for a way to keep the renderer clean from any electron communication libraries like ipcRenderer.
So I'm not sure where to put the vuex dispatch progress.

First approach is to use some sort of environment library to keep renderer clean from any
electron specific stuff. (To support browser only too)

Something like this:

import {createApp} from 'vue';
import App from '/@/App.vue';
import router from '/@/router';
import store from '/@/store';
import environment from '../../core/src/index';

createApp(App)
  .use(router)
  .use(store)
  .mount('#app');

environment.init();
environment.connectStore(store);

With the above approach I Ignored the ContextBridge which is
I assume intended for communicate between main + renderer.

main/src/index.ts

 click: () => {
              context.openModal()

preload/src/index.ts

contextBridge.exposeInMainWorld('my_content', { context });

context

const myContext = {
    openModal(name: string) {
        for (const window of BrowserWindow.getAllWindows()) {
            window.webContents.send('openModal', name);

            // or store.dispatch here ???
        }
    },
};

Does anyone have examples or did something similar to get an idea for the communication?

Regards

[cawa-93]

First of all: Do you really need a Vuex for this? Very often Vuex is used where it is excessive. Think about it again.

In one of my projects I use the following approach:
Preload receives an event from the main and simply creates a new DOM event to which the renderer is listen.

[regenrek]

Hi.

No i just mentioned vuex because its well known. Whats your recommendation of state management in vue3?

Im currently transitioning from vue2 to vue3. so looking for some best practices.

im aware of vueuse and https://pinia.vuejs.org/core-concepts/state.html.

[cawa-93]

Vuex or pinia are good managers if you need a GLOBAL state. However, it is often used as a source of global METHODS or as a state repository for several components only.

In the first case, the best alternative would be the common isolated functions.
In the second case, composite functions will be a good alternative. The example I have given is in fact a store of the global state. But it is simple single function that returns reactive variable. (Dependent component)