Currently, I am working on my initial project using Vue.js. The application involves a multi-step form that shares a common header and footer. As the user progresses through each step, the data entered is sent to store.js for storage. However, I have encountered an issue where I cannot retrieve the information from the earlier sections of the form to display a summary at the final step.
Every time I click on the "Next" button in each step, the data is sent to store.js and the navigation moves to the next component. Below is an example of this action within one of the components:
onSubmit() {
const formData = {
selectedService: this.focusService,
selectedItem: this.selectedItem,
selectedShop: this.selectedShop,
selectedItemId: this.selectedItemId
};
this.$store.dispatch('formInfo', {
selectedService: formData.selectedService,
selectedItem: formData.selectedItem,
selectedShop: formData.selectedShop,
selectedItemId: formData.selectedItemId
});
this.$store.dispatch('setStep', this.step + 1);
this.$router.push('/shop/buyer');
}
In store.js, I verify if the data is correctly received by the 'formInfo()' method and then store it in a declared state class property. Additionally, I set up a getter to retrieve the stored information from the state:
export default new Vuex.Store({
state: {
// State properties here
},
actions: {
formInfo({commit, dispatch}, authData) {
console.log(authData)
this.fisrtStepInfo = authData
console.log(this.fisrtStepInfo)
}
},
getters: {
formInfoFirstStep (state) {
console.log(state)
return state.fisrtStepInfo
}
}
Lastly, in the component where I need to display this information in my HTML, I utilize the 'computed' section of my script to call the previously declared getter from store.js:
export default {
data() {
return {
// Data properties here
}
},
computed: {
firstFormInfo() {
console.log('firstforminfo')
return !this.$store.getters.formInfoFirstStep
},
}
}
Despite setting up everything correctly, it seems like the getter is not being accessed in the 'computed' section. Any guidance on what could be going wrong would be greatly appreciated. Thank you for your time and assistance!