Search code examples
javascriptvue.jselectronvuexvuex-modules

Vuex action dispatch problem with electron


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?


Solution

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