How we use Composition API as Vuex alternatives
Changes in UI state without the user needing to refresh became one of the standards in today’s modern web apps. And in development, some of these states are often used repeatedly in many places. So to reduce the repetition of writing the same state, we will make the state accessible in many areas — a global state. Another reason we need this global state is that changes in the UI sometimes depend on specific states; for example, the UI in part A will change when the state in UI part B is triggered.
In React, Redux is often used to set the global state and the flow of changes. Likewise with Vue, which uses Vuex. Now, the use of Redux/Vuex is critical and cannot be separated because this global state is a common thing in today’s web apps.
When Vue introduced its latest version, one of the highlights of the feature was the Vue Composition API which was discussed in my previous article.
We found that the composition API gives developers more freedom in creating components, including using reactive properties outside of the components. This article shares how we use the composition API as an alternative to Vuex in creating global state management.
Note: In this article, we use Vue 2 by using the vue-composition-api library. If you’re using Vue 3, this feature should be included.
For the implementation, we created a composable directory for the folder structure to hold all state files — can also name them with compositions. We use the use- prefix as a marker for naming the file that is the file used for state management.
Take, for example, the file useUser. The naming itself is unrestrained, but we try to use the prefix to signify that it is a composable file. In this file, we create a structure that is almost similar to Vuex. State for reactive properties, a method for changing state value, and a dispatch method.
That’s it! Now we can use userData in any component we need. We can also call the fetchUserData method of the component that requires it. Like Vuex, we want the state value to be changed only by this setUserData. To prevent the value of this state from changing outside the composable, we can add read-only to toRefs so that the value in this state cannot be changed outside this composable.
We will then use this file in one of the components we have created. In this example, we are trying to fetch user data from Github, then display it on the page.
Sharing Across Modules
Let say, your web apps is consist of several UI modules, as illustrated in the following simple diagram:
Suppose you find a condition where some of your modules require data from the same state. In that case, module A and module D need userData. We can create a composable in the UI container and then make the composable file a global property in your Vue application. Then, we can access it through a property statement using Vue.prototype.
Any module component that needs that data can access it via Context root.$useUser
Every time there is a change in the state data in the UI container, all module components that use that data will also be updated.
Conclusion
The Composition API provides flexibility in creating global states. We can also be creative and make custom functions with these composable files according to the needs of our application without sticking to the rules provided by Vuex. In fact, we can also make this composable as a substitute for mixins.
However, by using this method, it is still possible to mix and match with Vuex if needed. This is just an example of how we can create a global state and share it across multiple components — even modules without using Vuex.
