If you are new to vue state management or you’ve never used any front-end framework the likes of React and angular, you may not appreciate the concept of a centralize store for state management or its important while building a large scale app.
Sometimes, even after seeing tones of tutorials on state management, you may likely not find it relevant until there’s an real need for it.
Take for example, you wish to collapse a sidebar by just clicking on the toggle bar on your display screen, which is saved in a component separate from the sidebar assuming your codes are splitted into Sidebar and Header components, you'll suddenly realize is almost not viable to use props considering the fact that there is not a child to parent relationship between those components. What this means is, the 'Header' component which holds the toggle-bar cannot communicate with the state (data) of the 'Sidebar' component.
So, how do we clear up this trouble? One way of getting through this is to make these components depend on the same piece of state(data). You will need to create a centralize store where every component instance could have access to the same piece of state or data and then, cause changes no matter where they are. This concept is known as global state management.
Before vue observable( ), there was no effective way of sharing state globally throughout the vue application except with vuex, an external vue library for managing global state. This required the user to first go through a rigorous process of installation before it could be used in the application.
In other to improve on this limitation, the vue team released the observable api under vue 2.6 version. But, the observable api nevertheless couldn't adequately address some notable issues, this led to the vue team rolling out the amazing composition api whose core feature is “Reactivity”.
With the release of vue 3 which makes use of the composition api, there has been lots of changes and improvement on state management.
Going further, this article is designed to help you understand global state management in vue, with examples.
This article is divided into the following sections
How to install/setup the vue application
State management with the Options api
State management with the Composition api
State management with Vuex
State management with Pinia
How To Install/Setup Vue App
In the section, I will walk the users the vue installation process. I will advice you install vue 3 since both the Options and composition api seamlessly work with it.
Here is a simple guide to the installation process
Install up-to-date Node.js from its official site, www.nodejs.org
Run the following command on your command line
After running the dev command, there will be a link on the CDM, something like this http://localhost:5173. Now paste and open that link on yyour browser.
State Management With Options API
In Options api, according the the vue documentation, reactive data is declared using the data() option. Internally, the object returned by data() is made reactive via the reactive() function, which is also available as a public api.
In the Options api, there is no centralize ways manage state, as an alternative, components are placed in hierarchy such that they share a parent to child relationship. This makes it possible to pass data as props to other components while Provide/inject method are used to communicate with deeply rooted components. Components can also communicate with other components by emitting events( sometimes through event bus) to multiple copies of the state.
However, a need may arise where one may wish to share data with components which do not share any relationship with each other. It then becomes almost impossible using those methods.
A workaround will be to use mixins which allows us to defined our logic and merge them with components where we wish to use them . Mixins also comes with some drawbacks
There’s the issue of name comfit
It is difficult to debug especially when multiple mixins are used
It is not a state management mechanism as it is meant to share reusable functionality across different component.
With the vue version 2.6, the vue team came up with the vue observable(). The Vue observable( ) was a better substitute to mixins and can be seen as a home rolled solution to manage state instead of relying on external state libraries. The vue observable( ) is able to manage state globally by creating reactive data outside of a vue component, thus, making it possible to have a single source of truth that can be shared directly between components without the use of external state management libraries.
State Management With Composition API
The composition api implements Reactivity as its core feature and it’s what makes it different and extremely powerful than the Options api. It also solve all the drawbacks of mixins.
It can be used to create a centralize store where a common state can be shared globally across the application or components/pages.
In composition api, store has an architecture that is similar to that of the Options, in the store, you have your state as the source of truth, you can have a getters which is the same as computed method and an action (method) to mutate or change state.
In contrast to vuex, it is not verbose. There’s no need using commit or dispatch. It is straight forward, easy for new vue developers to pickup. It makes global state management fun to use because it replicates same style as the Options api.
The Reactivity api comes handy, it saves you the stress of installing external state libraries but limited in scope as compared to external libraries for global state management. However, it is very useful for small projects or even some large scale projects.
If you are considering building apps that don’t require server side rendering (SSR), then composition api is the obvious way to go.
Here are the codes on how to solve the toggle bar issue using composition api
Create a folder on your src, call it store
Create a file call it composables.js
Create a component "Header.vue"
create the 'Sidebar.vue' component
Then register these components on the main root component (App.vue)
.Paste the link and open on your browser. By this tiem you should be able to collapse the sidebar.
State Management With Vuex
Vuex was the first official external state management library and was build upon the Options API,
It makes it easy to share common state or date with components/pages without trading off performance, testability and maintainability.
Vuex 4 works with both the Options and composition api. It brings the following benefits
Server-Side Rendering support (SSR)
Integrating with the Vue devTools, including timeline, in-component inspection, and time-travel debugging.
Make it easy to work as a team
Installation: on your command line navigate into your newly installed vue app and enter
Create a folder on your src folder, name it store
Create a file call it index.js
Create a component "Header.vue"
Create the 'Sidebar.vue' component
Then register these components on the main root component (App.vue) like you did with the former.
.Paste the link and open on your browser. By this tiem you should be able to collapse the sidebar.
State Management With Pinia
As at the time of writing this article, pinia is considered the official state management for Vue since it implements almost the exact same or enhanced api as Vuex 5 and also work with with both opinion api and composition api.
Pinia is an external state management library and a new default for sharing state across components/pages. It is lightweight and easy to learn especially for developers new to state management, this is mainly due to the fact that it follows the same principle or architecture of state, computed ( this is known as getters in Pinia) and methods ( this is known as actions in Pinia). These similarities makes using Pinia easy and straight forward to use and removes the whole complexity of using Vuex for state management.
So, why should you choose Pinia over vuex or the Composable?
Pinia's api is much simpler, intuitive and fully typed, that is it can be used with Typescript. It brings the benefits of Composition API, but has a structure which greatly resembles the Options API, which you're probably familiar with:
Here are some answers to the above question
Make it easy to work as a team
Integrated with Vue devTools, including timeline, in component inspection, and time-travel debugging
Hot Module Replacement
Server-Side Rendering support (SSR)
has a reactive
state, equivalent ofdatafunction in Options APIactions are no longer necessarily
asyncother stores can now be invoked directly in any actions/getters, even allowing cyclic dependencies; this reduces the need to nest stores, although still possible
all stores are now dynamically registered at runtime (when they are invoked for the first time; the store starts empty)
Installation: on your command line navigate into your newly installed vue app and enter
Create a pinia instance (the root store) and pass it to the app as a plugin on the main.js file
Note: if your app is using vue 2.7 which uses the Options api, you are recommended to install the composition api first before installing pinia @vue/composition api
Create a folder on your src folder, name it stores
Create a file call it toggle.js
Create a component "Header.vue"
create the 'Sidebar.vue' component
Then register these components on the main root component (App.vue) like you did with the former.
.Paste the link and open on your browser. By this tiem you should be able to collapse the sidebar.
Now whenever the store object is mutated, both '"Header Component and "Sidebar Compoent” will update their views automatically. this is possible owing to the fact that we have a single source of truth now. This also means any component importing store can mutate it however they want.
Conclusion
Now you have seen how to use share global state within the whole of your vue application and also how to mutate this state from any component regardless of the relationship they share. We have also demostrated how we can manage state with the new composition (Reactivity) api instead of using an external state library. We also saw that Pinia is much easier to pickup as a developer new to state management since it removes the bogus boiler plate seen in vuex. lastly, we saw that external state management libraries comes some benefits as compared to the composition api.
So in your next project you may consider either using the composition api to manage global state in your project or rely on external vue libraries . However if you are working as a team or your project involve an ssr, then, consider using Pinia.
