how can I use vuex-electron with quasar?

jaysaurus

I’ve tried to just install it as I would with the default vue-electron build but it can’t find quasar’s electron:

Cannot find module '/home/<user>/<project>/node_modules/electron'

Obviously I could install electron but I suspect that wont work.

metalsadman

@jaysaurus use quasar mode add electron on your quasar project https://v1.quasar-framework.org/quasar-cli/developing-electron-apps/preparation.

jaysaurus

That simply enables electron I have electron running just fine but I want to use vuex-electron, a plugin that will allow me to access the store in either thread. I’ve used it with the vue-electron project in the past but it doesn’t seem to be included in Quasar’s variation of said project.

metalsadman

@jaysaurus install it and add it as a boot file https://v1.quasar-framework.org/quasar-cli/cli-documentation/boot-files#Introduction.

jaysaurus

Looking at the lifecycle of Quasar, and having experimented with the boot, I’m not convinced you’d be able to wire up a boot file in this manner. Remember, the store is initialised just before the boot files are run and Electron is initialised just after. vuex’s complaint is that electron isn’t found in the node modules; given that the store is called first, I don’t think it’ll find the electron for that self-same reason. Even so,

here’s an example of an initialised store with vuex-electron:

import Vue from "vue"
import Vuex from "vuex"
 
import { createPersistedState, createSharedMutations } from "vuex-electron"
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  // ...
  plugins: [
    createPersistedState(),
    createSharedMutations()
  ],
  // ...
})

The point at which you need to supply the plugins is during the definition of said store, I followed the instructions in the boot doc to the letter and - instead of calling them in the store page - pushed the plugins to the store. Unfortunately, it didn’t make any difference. Not sure, therefore, that there’s a cogent way of implementing this without manually implementing Electron myself

import { createPersistedState, createSharedMutations } from 'vuex-electron'

export default ({ router, store, Vue }) => {
  store.plugins = store.plugins || []
  store.plugins.push(createPersistedState())
  store.plugins.push(createSharedMutations())
}

s.molinari

Can you show us how you wrote your boot file for this?

Scott

jaysaurus

the boot file is the one pictured above

import { createPersistedState, createSharedMutations } from 'vuex-electron'

export default ({ router, store, Vue }) => {
  store.plugins = store.plugins || []
  store.plugins.push(createPersistedState())
  store.plugins.push(createSharedMutations())
}

it doesn’t require Vue.use() etc. you’re just declaring plugins in Vuex which - from what i’ve read - basically do a bunch of ipcrenderer/ipcmain calls on your behalf under the hood. It’s handy because you can do Nodejs file IO in vuex stores (that’s basically why I was using it, saves me playing pingpong between renderer and main all the time)

If memory serves me, I put it in …/src/boot/vue-electron-boot.js

then I put the relevant ‘vue-electron-boot’ in quasar.conf.js

I’m not sure it spotted said file actually (I’m using quasar beta at the moment if that has anything to do with it).

metalsadman

@jaysaurus i see, you can do it in your src/store/index.js (neglect the boot file).
something like this:

...
import { createPersistedState, createSharedMutations } from 'vuex-electron'
...
export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      // your store modules
    },
    plugins: [createPersistedState(), createSharedMutations()]
  })
...
}

jaysaurus

@metalsadman Yeah, that’s what I did! but it doesn’t work! Sorry, Maybe my OP should have been clearer I did as the Vuex-electron instructions advised but I get the given error. Most likely this is because Electron needs to be initialised before the store. Unfortunately the quasar event chain runs the other way round!

s.molinari

Did you see the bit about adding the store to the plugin as a way to initialize the plug-in? Not all plug-ins allow for this, but it’s supposed to be a method to get the plug-in “injected” after the store is created. Something like:

import { createPersistedState, createSharedMutations } from 'vuex-electron'

export default ({ router, store, Vue }) => {
  createPersistedState(store)
  createSharedMutations(store)
}

It’s a wild guess on my part.

Scott

metalsadman

@jaysaurus i’m not familiar with vuex-electron, have you tried #3 of its installation guide? 3) In case if you enabled createSharedMutations() plugin you need to create an instance of store in the main process. To do it just add this line into your main process (for example src/main.js):
import ‘./path/to/your/store’. which was also used in their example as seen here https://github.com/vue-electron/vuex-electron-example/blob/master/src/main.js.

in your case the electron main.js should be found in src-electron/main-process/electron-main.js https://v1.quasar-framework.org/quasar-cli/developing-electron-apps/introduction#Main-Thread.

jaysaurus

@s-molinari said in how can I use vuex-electron with quasar?:

Did you see the bit about adding the store to the plugin as a way to initialize the plug-in? Not all plug-ins allow for this, but it’s supposed to be a method to get the plug-in “injected” after the store is created. Something like:
import { createPersistedState, createSharedMutations } from 'vuex-electron'

export default ({ router, store, Vue }) => {
  createPersistedState(store)
  createSharedMutations(store)
}
It’s a wild guess on my part.

Scott

ooh no, that’s a good thing to investigate! I’m sort of at a point now where everything has been refactored to not use the store via the main process so it’s sort of a moot point, but that could well be a solution should other people have problems in future (assuming that it doesn’t quibble about electron since the event-pipeline hasn’t reached loading that at the point at which you create the boot).

@metalsadman yeah I was defining said store in my electron-main as specified in the instructions. I suspect the actions wont work if you don’t have createSharedMutations().

smakinson

@jaysaurus Were you able to get this working. I’m hoping to be able to call an action from one BrowserWindow and have another one pick up the change. Its for an array of objects.

smakinson

Seems to work if I go back to electron-main with my value first with ipcRenderer then from there dispatch is used. Curious if you found a better way.

smakinson

@jaysaurus Everything had been working fine until I build and run the actual electron build. I’m only using createSharedMutations to share data between 2 electron browser windows. If I use the createSharedMutations plugin and I do the required step of importing the store into electron-main.js, when I build & run it I immediately get an error notice that it cannot find the module ‘vue’. It works fine when I run quasar dev -m electron

@s-molinari @metalsadman any thoughts on why this might be happening?

s.molinari

Sorry, no clue on my part.

Scott

No More Posting New Topics!

how can I use vuex-electron with quasar?