Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 963
Daimos Avatar asked Dec 12 '18 17:12

Daimos


People also ask

How do I dispatch action in another action of Vuex?

You can call another Vuex action by passing the name of that action as a string as the first argument of dispatch : const store = new Vuex. Store({ actions: { walk(context) { context. dispatch("goForward"); }, goForward(context) { // }, }, });

What is difference between dispatch and commit in Vuex?

Dispatch triggers an action whereas commit triggers a mutation. $dispatch is always used from your methods in routes/components. It sends a message to Vuex store to perform some action. The action can be performed any time after the current tick so that it will not affect the frontend performance.

What is difference between mutation and action in Vuex?

Mutations are intended to receive input only via their payload and to not produce side effects elsewhere. While actions get a full context to work with, mutations only have the state and the payload .

Does Vuex Dispatch return a promise?

In Vuex actions are asynchronous. If an action is complete , there is no way to detect that. You can return a Promise to let the calling function know that the action is complete.


3 Answers

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'
})
like image 167
Daimos Avatar answered Oct 17 '22 14:10

Daimos


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'
like image 3
孙维松 Avatar answered Oct 17 '22 14:10

孙维松


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

like image 1
user10863951 Avatar answered Oct 17 '22 14:10

user10863951