Vue – Provide & Inject

If you visit my blog regularly, you probably know, that I really like Vuex in Vue. It’s amazing tool, that allows us to solve a lot of issues with data flow, it also allows us to organize and clean code. But sometimes, Vuex is too big tool to use. For small apps, small pages, we probably do not need such “engine”. I think even in such cases, we should use it, because our app can get much bigger in the future, but for many people, it’s not necessary and maybe redundant. This post is about Provide & Inject pattern in Vue – it’s similar to Vuex in many times, but do not require any additional tools, it’s build-in into Vue core.

Continue reading “Vue – Provide & Inject”

Vue.js: why event bus is bad idea

In February 2019 I wrote a post about global event bus in Vue.js. It’s a pattern to achieve very common thing: transform data not only from parent to child components, but also in reverse order. Event bus allows us to also emit events from parent to children and simply use methods for them. Unfortunately, because of many reasons, it isn’t good pattern and we should avoid it, if there are more possible options to use. After year and a lot of new experiences I can say: event bus is antipattern and should be avoided.  Why? In this short post, I will try to explain this in the simplest way I can. Of course, I open for discussion about that, so feel free to comment and write about your experiences.

Continue reading “Vue.js: why event bus is bad idea”

Vue Vuex: reset store state to default / initial

Vuex is amazing tool for Vue, and I’ve already written a post about one of its adoption in web application: to avoid multiple ajax requests from many component instances. Of course, there are many, many options how to use Vuex in our app, and the most common is standard store with modules data. It’s great, but there is one important problem: default state and option to reset state. Vuex doesn’t have build-in option to reset state to default, defined in store declaration, so many users write additional commits and mutations for that, or one, which copies the same props as initial state. It’s ok, but means, that we must duplicate the same code, and if we want to change initial state, we must also change reset method.

Continue reading “Vue Vuex: reset store state to default / initial”

Vue: forcing components refresh with keys

During my work with Vue, I had some strange issues with data reactivity. In theory, everything should be fine and clear, and it’s true… but only in simple cases. If we use arrays, objects and more complex structures, reactivity can me misunderstanding for us. There are several options how we can solve this problem, but most of them are very bad. Fortunately, there is one, but very good and will work in any case: using key attribute for component and other elements on our Vue template. This post is how use it and what should we avoid when we fight with reactivity.   

Continue reading “Vue: forcing components refresh with keys”

Use Vuex to avoid multiple requests from different components

JavaScript is asynchronous, it’s big advantage, but in some cases, also a big problem. The most popular mistakes relate to AJAX requests. Many people trying to do something before there is a response with data, and it cannot work. Now we can use many comfortable tools, and don’t have to remember about that – one of them is async/await. But sometimes, it can be still a problem. Let’s say, we use Vue, have one page with multiple similar components. Each of them needs some data from the same API endpoint, and calls request. In that case, we can’t use async/await, because there a lot of completely separate components. How can we avoid multiple requests then? There are few solutions, one of them is to use Vuex and this post is about that. 

Continue reading “Use Vuex to avoid multiple requests from different components”