Almost everyone who has worked on a legacy application has at least once uttered the words, “Where is that coming from?!” while trying to figure out where a change to a variable originated. Unfortunately, this is not only limited to legacy applications, it is very easy to write unscalable code using modern tools. I am going to outline 5 rules I follow when creating maintainable components that make use of the Vuex store.

A working knowledge of Vuex is required to fully appreciate the rules.

We will be using the example below to illustrate the 5 points. The example shows a delivery address component that has the capability to edit the first line of the address. We will not include anything to do with errors as it’s just a different logic branch and the same principles will still apply.

#vuex #vue-component #vuejs #javascript