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”

JavaScript ES6: string interpolation

JavaScript Test

This small post is next about very nice ES6 features, next to post about arrow functions in JavaScript. In many cases we must concat many strings with variables in JS or other languages. For example to inject some data, URLs, names, params or just for display something on page or app. In the past, we have to use plus operator and concat everything in very, very messy way. With ES6 we can stop doing this and use strings interpolation. Similar to, for example PHP, we can put variables in the same line without additional operators. Please look at small examples.

Continue reading “JavaScript ES6: string interpolation”

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”