A Beginner’s Guide To Vue’s Application Data StoreTip#3: When in doubt, re-render.
Here’s a simple use case, say you have an order form that pops up.
If for some reason the user closes the order form and reopens it you might find some of the fields won’t allow edits, or they have stale data, or if you’re triggering the popup via a select box it might not work right.
Honestly it’s a major headache.
One trick is to re-render your components.
The easiest method I’ve found to do that is whenever a modal or some other component is registered on the DOM pass it a key, or on mount make it generate a random one.
A good key could just be to use moment.
js and generate a UTC timestamp and use that.
The key tells Vue that this is a NEW instance, forget about the old one, and let’s start over.
Tip#4: Don’t use a watcher until you can explain in detail the difference between a watcher and a computed property.
Watchers and computed props are very important and needed in the common Vue.
js developers workflow, but if you use them incorrectly you’ll run into headaches.
Nine times out of ten a computed property is what you REALLY want and if you’re not sure, you should probably try to devise a way to make a computed property instead of watcher.
Tip #5: Learn the difference between props and data.
Essentially a prop is data that you pass INTO the component from a parent component or on initializing the root component for the first time.
Data is the reactive properties defined on the instance.
I find it to be a good practice if you ever think you’ll need to update the value or use it re-actively to create a new value on mount that is a duplicate of the prop.
So say you have a prop called colorProp, you might have value in data called just color, then in your mount() method have this.
color set to colorProp.
Tip #6: Have a plan for loading elements.
You may start out just letting users wait without knowing what’s going on but this is going to get dirty fast.
Especially when you bring Vuex and multiple data points into the mix.
It’s best to have a single global ‘loader’ setup that triggers whenever the global ‘loading’ property from Vuex is updated.
This way you can always toggle it properly and make sure to un-toggle it.
One caveat is though — be sure you catch all errors — especially when using axios and promises and be sure to end the loading message on errors so users can go back, fix things and resubmit the form.
Tip #7: Use filters for common to reuse format methods.
See the example below:The above example works great on something small, but why not make it a global filter?.See below:https://gist.
github.
com/patrickcurl/279628e1ff6751f1e50679878aeffcThese are just a few common Vue.
js pitfalls I’ve been met with along my journey, I’m sure there are others.
Is there something I forgot that I should add to the list?.Please share in the comments!.