Vuex vs Global Store(Vue.Observable)

As a Vue developer, you've probably heard of the terms Vuex and Vue.observable; both are used to control the state of your application, but one is rather lengthy and tough for a newbie to grasp. This post will serve as your guide if you need a simple solution to manage your store application. In this article, we will learn what Vuex and Vue.observable are, their differences, and which one is ideal for managing your store application.

Table of Contents

1. Introduction to Vuex and Vue.observable
2. Comparison between Vuex and Vue.observable
3. Why you should use Vue.observable
4. Alternative of Vuex
5. Conclusion

Introduction to Vuex and Vue.observable

Vuex

Vuex is a state management pattern and library that serves as a centralized store for all our components in an application. Its rules ensure that the state can only be mutated in a predictable fashion.

Vue Observable

Vue.observable is a method we use to control the state of our applications; it creates reactive data outside of our vue component, making it possible for us to have a single state that we can share directly between multiple components.

Comparison between Vuex and Vue.observable

Vuex and Vue.observable are suitable for your projects, but performance and simplicity matter when working with any tool.

Pros of Vuex

• It has a devtool and a typescript support
• Best for large-scale applications
• Good community support and resources
• It has getter, mutations and actions

Cons of Vuex

• It is verbose for developers building small applications.

Pros of Vue Observable

• It is easy to get started with
• No setup or installation is required
• Use for managing small to medium applications
• No extra libraries are needed in Vue.observable

Cons of Vue Observable

• You don’t need mutations and actions.

Managing Store in Vuex and Vue Observable

Managing a store in our application can be straightforward; let’s look at a simple example below of what managing store with Vuex and Vue.observable look like:
In this example, we will look at a simple store that increases the quantity of a product item

Vue Observable

// store.js
import Vue from "vue";
const state = Vue.observable({
  productQuantity: 0,
});
export const productItemIncrement = () =>
 state.productIncrement++;
export const productItemDecrement = () =>
 state.productDecrement--;
export default state;

Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// defining store
const store = new Vuex.Store({
    state: {
        productIncrement: 0
    },
    mutations: {
        itemQuantity (state) {
          state.productIncrement++
        }
    },
})
// using store
store.dispatch('itemQuantity')

Why you should use Vue.observable

This is where many programmers get confused, and I frequently see inquiries like, "Why should I use Vue Observable if I can use Vuex to manage my applications?" Here is my response: It is advised to use Vue.observable If you’re tired of passing data around with props/events. Using getters and mutations within your store can be too lengthy and complex to manage your small to medium application state with Vuex

Alternative of Vuex

One of the Vue core team members, Eduardo, has created a new state management library called Pinia; it is currently the official state management library for Vue.
Pinia is very simple and easy to start, with many good features such as Hot module replacement, devtool support, typescript or Js autocomplete features, and server-side rendering support. Because Pinia is so lightweight, you can easily incorporate it into your application without worrying that it will affect the performance of your application.

Conclusion

When managing your state application, finding the right solution is necessary, as it will make the development process more manageable. In this article, we have learnt what Vuex and Vue.observable are, their pros and cons, store comparison and which one to use in managing our store. Hopefully, this article will help you choose the right solution for your store.