Vue.js + Vuex form binding circuit

Introduction

The state reactivity is one of the feature that make Vue.js really stands out, especially when using the v-model attribute within a form element. We can manage the local state (i.e inside a given component) very easily.

Things get a bit more complicated when someone needs to deal with Vuex store, and get the data centrally managed. We can send our data to Vuex via either actions or mutations, and can get them via mapped states or getters.

Problem

Vuex in its design, does not allow to change its state directly, this should be done via actions or mutations. When using v-model on a Vuex state, we break this Vuex law and therefore get an error.

To bypass this common problem, Vuex documentation provides a work around that make use of a modified computed property which contains getter and setter. Each form element has to be bound to this computed but I think this approach can become very verbose if our form contains a lot of fields.

My approach

After a lot of research, studying different proposed developer approaches, I’ve always used the same pattern since the beginning which I find the most robust and straightforward: bind the form components on a local deep copy of the Vuex state and keep updating this copy through a watcher.

Mindmap

As a picture is worth a thousands words, I made an illustrated mindmap of the full circuit to get things as clear as possible :

Note: I’m using the fetch hook as the entry point (I always work with Nuxt), but this can be replaced with the created/mounted hook.

By no mean I would pretend this is the best solution, but only one that suits me the best across all my projects so far. Let me know if you identify potential problems/optimizations with this one.