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.
Top comments (2)
Hi Stéphane,
thanks for sharing. two improvements as suggestions.
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...
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
Hi, thanks! (really late but never seen the notification 🤭).
I just changed the image url as I dropped the old WP site a while ago.
I don't use Vue anymore but thanks for the tip.
Though, I'm still using the json stringify trick to avoid importing a package for this single use case..