I'm currently working on an Electron app with Vuex. The store is set up for the entire application using modules. One of my test modules is 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
}
}
}
Within a component, I am attempting to dispatch the update action but it's not successful. However, the getters are functioning correctly:
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'])
},
Upon checking the console, I see this output:
mounted
Browser.vue?31a5:62 # GET FROM STORE: notSet
Browser.vue?31a5:63 # DISPATCH: undefined
Browser.vue?31a5:64 # GET FROM STORE 2: notSet
The action does exist, as indicated when I log the `this.$store` variable:
Store {_committing: false, _actions: {…}, _actionSubscribers: Array(0), _mutations: {…}, _wrappedGetters: {…}, …}
_actions:
Browser/updateCurrentPath
So, how should I properly dispatch the action?