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.