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?
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) { // }, }, });
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.
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 .
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With