how can I use vuex-electron with quasar?



  • 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.





  • 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())
    }
    


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

    Scott



  • 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).



  • @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()]
      })
    ...
    }
    


  • @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!



  • 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



  • @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.



  • @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().


Log in to reply