vuejs multi-step form

Creating Multi-step Form With Vuejs and Vuex Part 2

In the previous part of this series i showed how to created our app and created the form components and navigate between them using Vue router.

In this part we will continue this series if you need to check the last part click here. In this part we will save the form data into Vuex .

Vuex act as a central state manager for Vuejs so all your app data is contained within a big object and any updates that happened to that object is reflected in real time and this is what the term reactivity means.

 

Creating the Vuex Store

Open up store/index.js and add the below the code:

Here i created a new Store. A typical store should have at least two objects (state, mutations). State is where you add your form data so each form field will be mapped to state object like this:

 

Mutations is just functions that you use to update state objects. Note that you can’t update state directly using syntax like this:

But to update the state you need to create a mutation and then commit the mutation like this:

 

Let’s update our app.js and add the store as shown in the below code:

Now let’s fill the store with our form data so open store/index.js and add the below code:

Also we need to modify our components and set the store:

components/steps/FirstStep.vue



components/steps/SecondStep.vue

components/steps/ThirdStep.vue

components/steps/Buttons.vue

As shown in the code above we have make of the two way binding with v-model then we used the store data and create a computed property for each field and then the v-model will update the field accordingly. Finally in the Buttons.vue component when we click in the finish button then we display a summary of all the data that we selected and this is the benefit of the Vuex store. Here it’s up to you to save the data using remote api call and send it to the server.

 

Conclusion

In this series we learned how to create a multi-step form using the benefits of Vuejs components. And also learned how to bundle our view javascript files using webpack. And how to save the into the store using Vuex. You can further extend this tutorial and add the validation for the form and save the data into database.

Share this: