Vue Forms with Vuex (Part 1 of 2)- Persisting form data in Vuex

I’ve been working with Vue.js and Vuex for just a few months now. In a new project, I’ve been working on creating a search form and search results page. I had a need to persist the form data even after a user left the page, and also to clear it out at will. In Part 1, I will just deal with the persistence issue. I want the user to be able to perform a search, leave the page, and return to find each search field still populated with their last search criteria.

Easy, right?! Sort of. 😅 I realized early on that I could leverage Vuex to store my form data, and that I could retrieve and modify it from there. Great! Ok, so here is how I accomplished that. You can also grab the code from this tutorial on Github.

Setup the Vuex Store

Vuex has really great documentation that is easy to follow. I suggest starting there! Basically, I created a store.js file like the following. I like to separate this out from my main .js file for readability. Let’s say our search form has fields for name, age and address.

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)


export default new Vuex.Store({
    strict: true,
    state: {
        searchFilters: {
            name: '',
            age: '',
            address: ''…