Shared State Management with Vue Composition Api

Vue is one of the most impactful and popular frontend frameworks from the last decade. Its ease of use won the hearts of many software enthusiasts ranging from beginners to experts alike.

But like many component based frameworks, data management becomes an issue as an app begins to scale. The need for shared state becomes obvious and discussions on the best solution are usually divisive and subjective.

Vue solves this with the use of a first party external package called Vuex. It’s a state management library intended for use with Vue. It does this by abstracting the state and mutations (methods meant to change the state) into a store that’s available for any component to use.

Let’s create a simple Vuex store that has a list of items, methods to add and delete items, and a computed value to get the total number of items in the store.

We’ll create components that interact with the store.

The App component composes the Item and ItemForm components

Vue 3 brings a lot of new apis and features that make data and logic organization a lot cleaner and more reusable. Let’s see how we can model the same behaviour using Composition API introduced in vue 3 as well as the existing provide/inject api

reactive as the name implies, creates a reactive object that notifies its dependencies whenever its properties change. e.g, if the reactive object's property is referenced in a vue component's template, the component is registered as a dependency of that object's property and re-renders whenever that property changes.

computed accepts a function and returns a memoized value that gets updated whenever any of the reactive values referenced in the callback function gets updated.

readonly creates a read-only object. If an attempt is made to mutate any property on the object, a warning message is shown in the console and the operation fails.

Since the items-provider.js file is a module, we only expose/export what we need (in this case, itemStore). External modules and components shouldn't have direct access to mutate the items and properties of the store, so we expose a readonly version of the store.

We can now rewrite our components like so

In the App component we provide the itemStore to make it injectable in any descendant component.

Also note that in vue 3, you aren’t limited to just one root element per component

In the child components, we inject the itemStore and it becomes available within the component's context.

The major advantages to this approach are

The downside to this approach is that this is not a dedicated data store solution, and because of that, the developer tooling for this approach is not as rich as Vuex (which has a dedicated section in vue devtools and a plethora of plugins).

This is only a base case scenario. For more complex scenarios involving SSR, it might make sense to use provider factories (functions that create or return a new store).

This is purely meant to demonstrate the power that vue provides out of the box and show you another way to store data in your vue application

And finally, this is my first write-up. It took me a while to gather the inertia to write this. Please leave a comment if you found this informative and let me know what you’d like me to write about next. Also i welcome constructive criticism, so don’t hold back in the comments 😉.

Related posts:

When it comes to sandbox games, many people might think about Minecraft. Its release in 2011, and Minecraft has captured the hearts of millions of people worldwide. It has become the best of the…

Ragazze senza reggiseno: gli autoscatti più sensuali (Foto), QNM. Ragazze senza reggiseno: gli autoscatti più sensuali. Sei alla foto 1 su un totale di 30 immagini della fotogallery. Guarda altre…

Most of us tend to hate criticism, even if there is a level of truth to what is being said. This may very well be the case because you have been working hard to manage your business on your own. You…