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?

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?

• javascript
• vue.js
• electron
• vuex
• vuex-modules

3 Answers 3

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

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'

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