Solvedelectron vue this.$store.dispatch('someAsyncTask'), action not run

Found an issue or bug with electron-vue? Tell me all about it!

Questions regarding how to use electron or vue are likely to be closed as they are not direct issues with this boilerplate. Please seek solutions from official documentation or their respective communities.

Describe the issue / bug.

#

//file . my-project/src/renderer/components/LandingPage.vue
<button class="alt" @click="dispatchAction">dispatchAction</button>
dispatchAction () {
       this.$store.dispatch('someAsyncTask') // here
     }


// file . store/modules/Counter.js
const actions = {
 someAsyncTask ({ commit }) {
   console.log('56789')        // here             ---------------- click button ,log not print
   // do something async
   commit('INCREMENT_MAIN_COUNTER')
 }
}

// action can not run 
How can I reproduce this problem?

#
image
image

<template>
  <div id="wrapper">
    <img id="logo" src="~@/assets/logo.png" alt="electron-vue">
    <main>
      <div class="left-side">
        <span class="title">
          Welcome to your new project!
        </span>
        <system-information></system-information>
      </div>

      <div class="right-side">
        <div class="doc">
          <div class="title">Getting Started</div>
          <p>
            electron-vue comes packed with detailed documentation that covers everything from
            internal configurations, using the project structure, building your application,
            and so much more.
          </p>
          <button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs</button><br><br>
        </div>
        <div class="doc">
          <div class="title alt">Other Documentation</div>
          <button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>
          <button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
          <button class="alt" @click="dispatchAction">dispatchAction</button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import SystemInformation from './LandingPage/SystemInformation'

  export default {
    name: 'landing-page',
    components: { SystemInformation },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      dispatchAction () {
        this.$store.dispatch('someAsyncTask') // <<<<<<<<<< .  here .  <<<<<<<<<<<
      }
    }
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body { font-family: 'Source Sans Pro', sans-serif; }

  #wrapper {
    background:
      radial-gradient(
        ellipse at top left,
        rgba(255, 255, 255, 1) 40%,
        rgba(229, 229, 229, .9) 100%
      );
    height: 100vh;
    padding: 60px 80px;
    width: 100vw;
  }

  #logo {
    height: auto;
    margin-bottom: 20px;
    width: 420px;
  }

  main {
    display: flex;
    justify-content: space-between;
  }

  main > div { flex-basis: 50%; }

  .left-side {
    display: flex;
    flex-direction: column;
  }

  .welcome {
    color: #555;
    font-size: 23px;
    margin-bottom: 10px;
  }

  .title {
    color: #2c3e50;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 6px;
  }

  .title.alt {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .doc p {
    color: black;
    margin-bottom: 10px;
  }

  .doc button {
    font-size: .8em;
    cursor: pointer;
    outline: none;
    padding: 0.75em 2em;
    border-radius: 2em;
    display: inline-block;
    color: #fff;
    background-color: #4fc08d;
    transition: all 0.15s ease;
    box-sizing: border-box;
    border: 1px solid #4fc08d;
  }

  .doc button.alt {
    color: #42b983;
    background-color: transparent;
  }
</style>
If visual, provide a screenshot.

#

Tell me about your development environment.
  • Node version:
  • NPM version:
  • vue-cli version: (if necessary)
  • Operating System:
    image

If you are looking to suggest an enhancement or feature, then feel free to remove everything above.

25 Answers

βœ”οΈAccepted Answer

Same here and I've wasted just 2h debugging this crap until I realized the issue is in fact in electron-vue... 😠 I had to remove the createSharedMutations() function call.

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

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

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: modules,
  plugins: [
    createPersistedState()
    // createSharedMutations()
  ],
  strict: process.env.NODE_ENV !== 'production'
})

Other Answers:

@841660202 @krthr @burzum @mindfulmike

This issue was fixed in this PR: #745

In case if you are using createSharedMutations() you need just to create an instance of Vuex Store in the main process. Just add such line to the main process:

src/main/index.js

import '../renderer/store'

Just let me know if you have any issues after this line.

Have a nice day πŸ˜‰

This fix of importing store did not work for me (on a Mac) using a newly generated template project from https://github.com/SimulatedGREG/electron-vue

import '../renderer/store'

I'm new to vue and this bug burned up some time to realize the feature just doesn't work and it wasn't something I was doing.

This was the only solution that helped... just disable this feature.

export default new Vuex.Store({
  modules: modules,
  plugins: [
    createPersistedState()
    // createSharedMutations()
  ],
  strict: process.env.NODE_ENV !== 'production'
})

can confirm this issue is still here on latist build.

@hunkriyaz just remove createSharedMutations from the store init for now, worked for me

https://www.npmjs.com/package/vue-persist - you can just use this plugin instead if you want persisted state and dont necessarily need access to the store in the background process. you can always use ipcMain and ipcRenderer to communicate between your backend code and your store/actions if necessary.

More Issues: