Vuex action dispatch problem with electron

Question

I have electron app with vuex. Store is configured for whole app with modules, my test module Browser.js:

export default {
  namespaced: true,
  state: {
    currentPath: 'notSet'
  },
  mutations: {
    setPath (state) {
      state.currentPath = 'xxxx'
    }
  },
  actions: {
    updateCurrentPath ({ commit }) {
      console.log('COMMIT')
      commit('setPath')
    }
  },
  getters: {
    getCurrentPath (state) {
      return state.currentPath
    }
  }
}

Now inside component Im trying to dispatch update action with no success. Getters works fine:

mounted () {
  console.log('mounted')
  console.log('# GET FROM STORE:', this.$store.getters['Browser/getCurrentPath'])
  console.log('# DISPATCH:', this.$store.dispatch('Browser/updateCurrentPath'))
  console.log('# GET FROM STORE 2:', this.$store.getters['Browser/getCurrentPath'])
},

Console:

mounted
Browser.vue?31a5:62 # GET FROM STORE: notSet
Browser.vue?31a5:63 # DISPATCH: undefined
Browser.vue?31a5:64 # GET FROM STORE 2: notSet

Action exists, when I log this.$store variable I can see:

Store {_committing: false, _actions: {…}, _actionSubscribers: Array(0), _mutations: {…}, _wrappedGetters: {…}, …}
_actions:
Browser/updateCurrentPath

So how I should dispatch action?

score 22 · Accepted Answer · answered Dec 12 '18 at 21:21

22

Problem was with electron plugin. Im using electron-vue repo from github, and there is a plugin used:

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

createSharedMutations plugin was the problem. After commenting this out, everything works fine:

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

answered Dec 12 '18 at 21:21

Daimos

1,473
10
28

1

I Spent hours on this! – Param Singh Dec 18 '18 at 12:18
1

Me too :) Im glad if I could help – Daimos Dec 19 '18 at 17:20
Damn you saveed my day – Da Woon Jung Sep 28 '19 at 06:35

score 3 · Answer 2 · answered Feb 24 '19 at 09:04

3

If you use vue-electron template with vuex-electron plugin, you need to add following line in your src/main/index.js file

import store from '../renderer/store'

answered Feb 24 '19 at 09:04

孙维松

47
4

score 1 · Answer 3 · answered Jan 03 '19 at 17:26

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'link to official plug used by electron-vue which is causing this issue

Vuex action dispatch problem with electron

3 Answers3