Large Application Patterns with Vuex Chapter 18currentPanel: undefined,
currentImg: undefined,
errorStack: []
},
actions: {},
mutations: {}
}export default storeYou should import this inside main.js like in previous recipes. We want to trace the
current panel number, the link to the panel image, and the possible errors. The only way to
modify the state is through mutations, while actions can perform asynchronous work.
When the app is loaded, we plan to display the latest comic. For this, we create an action:
actions: {
goToLastPanel ({ commit }) {
axios.get(endpoint)
.then(({ data }) => {
commit('setPanel', data.num)
commit('setImg', data.img)
}).catch(error => {
commit('pushError', error)
})
}
...For this code to work, we need to declare the endpoint and install Axios:
...
import axios from 'axios'
...
const endpoint = '/comic/'It should be easy for you to write the corresponding mutations:
mutations: {
setPanel (state, num) {
state.currentPanel = num
},
setImg (state, img) {
state.currentImg = img
},
pushError (state, error) {
state.errorStack.push(error)
}
}