DEV Community

loading...
Cover image for Vue.js + Vuex form binding circuit

Vue.js + Vuex form binding circuit

lansolo99 profile image Stéphane CHANGARNIER ・2 min read

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 :


Alt Text

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.

Discussion (1)

pic
Editor guide
Collapse
itschris profile image
Christian Casutt

Hi Stéphane,
thanks for sharing. two improvements as suggestions.

  1. the Picture has a href to lansolo.dev/wp-content/uploads/202... which leads to a 404. i found the pic on your site then -> res.cloudinary.com/lansolo99/image...

  2. i'd appreciate a working sample implementation.

i've also read a lot about different approaches and i believe the copydeep (using lodash?) would be one of the most elegant solutions to this problem.

kinds regards,

Chris