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

[841660202]

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?

#

<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:
  

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

[krthr]

Same here....

[burzum]

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'
})

[mindfulmike]

vue-electron/vuex-electron#5

[akodkod]

@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 😉

[tomnielsen]

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'
})

[mindfulmike]

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.

[841660202]

thanks all

[841660202]

@MrEmelianenko

src/main/index.js

By import '../renderer/store' ,only use this.$store.dispatch, can not use this.$store.commit

By del createSharedMutations() ,both this.$store.dispatch and this.$store.commit can run

LandingPage.vue

<template>
  <div id="wrapper">
    <img id="logo" src="~@/assets/logo.png" alt="electron-vue">
    <main>
      --------* {{value}} *-----------
      <div>
        <button @click="onAdd">➕</button>
        <button @click="onDec">➖</button>
      </div>
    </main>
  </div>
</template>

<script>
  import SystemInformation from './LandingPage/SystemInformation'
  import {mapState, mapGetters, mapActions} from 'vuex'

  export default {
    name: 'landing-page',
    components: {SystemInformation},
    methods: {
      open(link) {
        this.$electron.shell.openExternal(link)
      },
      onAdd() {
        // this.$store.commit('INCREMENT_MAIN_COUNTER', {}) // del createSharedMutations()
        this.$store.dispatch('inc', {}) // use `import '../renderer/store'`
      },
      onDec() {
        // this.$store.commit('DECREMENT_MAIN_COUNTER', {}) // del createSharedMutations()
        this.$store.dispatch('dec', {}) // use `import '../renderer/store'`
      },
    },
    computed: {
      ...mapState({
        value: state => state.Counter.main
      }),
    },
  }
</script>

Counter.js

const state = {
  main: 0
}

const mutations = {
  DECREMENT_MAIN_COUNTER (state) {
    console.log('DECREMENT_MAIN_COUNTER')
    state.main--
  },
  INCREMENT_MAIN_COUNTER (state) {
    console.log('INCREMENT_MAIN_COUNTER')
    state.main++
  }
}

const actions = {
  someAsyncTask ({ commit }) {
    // do something async
    commit('INCREMENT_MAIN_COUNTER')
  },
  dec ({ commit }) {
    // do something async
    console.log('dec')

    commit('DECREMENT_MAIN_COUNTER')
  },
  inc ({ commit }) {
    // do something async
    console.log('inc')

    commit('INCREMENT_MAIN_COUNTER')
  }
}

export default {
  namespaces: true,
  state,
  mutations,
  actions
}

[MrJSdev]

Still the issue not solved.

[Ahriana]

can confirm this issue is still here on latist build.

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

[d14na]

Things were moving, then this just took the wind out of me. Why not just remove createSharedMutations? Is it really that important, as mentioned, you can always use ipcMain and ipcRenderer to communicate between your backend code and your store/actions if necessary.

[winterbang]

Is the issue solved?

[ZungTa]

not solved

[srimko]

It's still not solved

[Berbass]

Still not solve, and made me lose 2 hours...

[mochi-co]

Also ran into this problem today, still not solved, only solution that worked was to remove createSharedMutations.

[soyaine]

I solved by trying this, referred the vuejs/vuex#855 : just specify namespaced: true in each store file.

in renderer/store/modules/Conter.js

const state = {
  main: 0
}

const mutations = {
  DECREMENT_MAIN_COUNTER (state) {
    state.main--
  },
  INCREMENT_MAIN_COUNTER (state) {
    state.main++
  }
}

const actions = {
  someAsyncTask ({ commit }) {
    commit('INCREMENT_MAIN_COUNTER')
  }
}

export default {
  namespaced: true,   // ADD THIS LINE
  state,
  mutations,
  actions
}

in renderer/store/index.js

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

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

import modules from './modules'

Vue.use(Vuex)

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

And please notice that you should write like this when using them:

export default {
  name: 'componentName',
  computed: {
    ...mapState('Conter', ['main'])  // use like this line
  },
  methods: {
    ...mapActions('Conter', ['someAsyncTask'])  // use like this line
  }
}

[luixal]

Hi over there, another one that lost a couple hours looking into this!

Although it is documented in the Instalation section, the main problem is that you expect the default template to work and, in this case, dispatching actions on Vuex store doesn't out of the box.

Either some code is added to import Vuex modules dynamically in main.js or createSharedMutations() is removed/commented by default (it's a pity vuex-electron package includes this kind of packages by default, as you can't remove sharedMutations package if you're not using it).

Cheers!

[vinicioslc]

Not solved, plox add in example project, the omiting //createSharedMutations step to fix

[daniandl]

I've had a lot of problems with vuex-electron too, I dont know if it's safe to include by default..

[ChinaShrimp]

+1
comment out createSharedMutations saves me, and waiting for the solution.

[darthdeus]

still doesn't seem to work without removing createSharedMutations

[mvaneijgen]

I really prefer @soyaine solution, but I also had to disable createSharedMutations. It seems to do the dispatch once, but then it somehow get stuck on that initial dispatch value.

When disabling createSharedMutations dispatch works like expected.

[Nisthar]

Its working fine for me now without disabling createSharedMutations