vuex VS vueuse

Something I have already seen in many different code bases using frontend libraries like React and Vue is that developers use advanced state management solutions (e.g. Redux, Vuex, or Pinia) way too often.

Document address: Vuex official document

To avoid prop drilling we can make use of state management library like Vuex and Pinia, but for this article I will demonstrate of using Vue provide and inject. Let's refactor our components.

Flexibility: Vue is also flexible but provides more built-in solutions out of the box, such as Vue Router for navigation and Vuex for state management. This can reduce the need for additional libraries and make development more straightforward.

If you have been using Vue.js before 3.x you are probably familiar with Vuex now renamed Pinia. It allows you to have a centralized state that is shared across all your application components. If you have ever found yourself in situations where you are passing data/props between components and things are getting complicated, a centralized state is the answer.

Pinia is a relatively new state management tool for the Vue ecosystem. It is the new preferred state management tool recommended by the Vue core team replacing Vuex. Compared to Vuex, Pinia is type-safe by default (direct-vuex was needed to make Vuex type-safe), extremely lightweight, and modular by design (meaning you can create multiple stores instead of multiple modules inside one store, which optimises performance). Similar to Vuex, Pinia has state, computed properties (getters) and methods (mutations and actions). Read more about Pinia and its usage to understand the similarities and differences between Pinia and Vuex.

Vue.js also offers built-in features like animation and state management through Vuex which serve a wide range of development needs.

I really liked the idea of how all the core Vue libraries are maintained by Vue team themselves, making Vue feels like an all-in-one package instead of infinite npm install to add multiple community/personally maintained repos which often caused issues because they don't blend together. And now Pinia will be officially replacing Vuex, making me doubt if it'll be as reliable as Vuex.

Vuex: https://vuex.vuejs.org/

Pinia. No discussion. Have you checked the Vuex website? It says Pinia is default. https://vuex.vuejs.org/

VueUse is packed with handy functions that enhance your Vue components. From managing mouse movements to simplifying form handling, VueUse makes your development toolkit richer. Best of all, there’s literally no cost to adding it to every new application. It’s tree-shakable composables only add to your bundle what you actually use.

Here's an example of a Vue composable: https://github.com/vueuse/vueuse/blob/main/packages/core/use...

Here is an example of how it's used: https://github.com/vueuse/vueuse/blob/main/packages/core/use...

And the unit tests: https://github.com/vueuse/vueuse/blob/main/packages/core/use...

Another one from the same lib: https://github.com/vueuse/vueuse/blob/main/packages/core/use...

Unit test: https://github.com/vueuse/vueuse/blob/main/packages/core/use...

Extracting this logic into a reusable composable is a great way to streamline the process. But here’s the good news: we don’t even need to do that! The useVModel composable from VueUse handles this for us!

Vue Use is a collection of essential Vue Composition Utilities for Vue 2 and 3. It is a library that provides a set of reusable functions and utilities to help developers build Vue applications more efficiently and effectively.

Document address: VueUse Official Document

For Vue — it is, for example, vueuse. (vue utility functions)

My opinion: Vue, specifically the Vue 3 Composition API. Most of your app state should come from computed() values. Bookmark https://vueuse.org and come back to it often. Go through VueUse's source (the docs for each function link to their source): you'll be surprised at how simple most of it is, and it stands as documentation of best practices for using the composition API in general.

Now, let’s talk about Vue! Once again, we’ll use an external library to handle dark mode simply and quickly. In this case, the library is called VueUse, and you can install it using the command npm i @vueuse/core --save.