After transitioning to the Vuex store, I've been steadily moving forward. However, my current hurdle involves invoking an action from within another action in Vuex. My grasp on Vue.js is still a work in progress.
Current versions
Vue 3Vuex 4- If necessary, I utilize
Electron Vue.js dev tools
/src/store/index.js - Existing code
/* eslint-disable no-redeclare */
import { createStore } from 'vuex'
import axios from 'axios'
export default createStore({
state: {
...
},
mutations: {
setQuery(state, query) {
// refers this.state.query
state.query = query
},
setOnlinePresenceInitialPageLoad(state, presence) {
// refers this.state.online & this.state.initialPageLoad
state.online = presence
state.initialPageLoad = false
},
setRequestErrorAndStatus(state, { _status, code }) {
// refers this.state.request.error & this.state.request._status
state.request.error = _status
state.request._status = code
},
setResults(state, processed) {
state.request.results = processed
}
},
actions: {
callApi({ commit, state, dispatch }) {
axios.get(state.axios.targetURL, {
baseURL: state.axios.config.baseURL,
params: {
days: state.axios.config.params.days,
q: state.query,
key: state.axios.config.params.key,
},
}).then(response => {
console.log(response.status)
commit('setOnlinePresenceInitialPageLoad', true);
dispatch('formatResults', response.data);
}).catch(error => {
if (error.response) {
console.log(error.response.status)
} else if (error.request) {
console.log(error.request.status)
} else {
console.log("Couldn't find the problem")
}
})
},
formatResults(context, payload) {
const processedData = {
...
}
console.log(processedData);
context.commit('setResults', processData);
}
},
modules: {
}
})
In the example above, callApi() triggers the formatResults() in the successful segment of the Promise.
Current state (Web browser)
https://i.sstatic.net/SxMHz.jpg
Within the code, I attempted to output the variable processedData. I assumed it would be displayed in the console.
Current state (Vue Devtools)
https://i.sstatic.net/OIOHO.jpg
I'm also curious as to why formatResults() seems to never complete.
If async functions can resolve this issue, then I am interested in learning the necessary steps. Any advice is greatly appreciated.
Thank you for your assistance!