What are the difference between Vuex store and Plain Global Object ?

While working with JavaScript projects or applications, managing the application’s state properly becomes very important. This crucial work is been handled by Vuex Store and Plain Global Object. Both these methods aim to properly handle the state of the application, but they differ in some of the parameters. In this article, we will go through a detailed explanation of Vuex Store and Plain Global Object along with their example and lastly, we will explore the difference between these 2 approaches with unique and important parameters.

Vuex Store

Vuex Store in Vue.js is basically a state management module and library designed for Vue.js applications. This library offers a centralized store to properly manage the application’s behavior and state. We can properly manage and modularize the state logic efficiently. The Vuex Store is reactive, which means that any certain changes done to the state trigger updates throughout the entire application. Vuex Store has built-in mechanisms like a getter to modify and access the state in application and mutations. Vuex is most probably designed to integrate seamlessly with the Vue.js framework, which makes it a fitness suite for Vue.js framework projects and applications.

Steps to install a Vue App:

Step 1: Install Vue modules using the below npm command

npm install vue

Step 2: Use Vue JS through CLI. Open your terminal or command prompt and run the below command.

npm install --global vue-cli

Step 3: To use the Vuex, the following command will be used

npm install vuex@next --save

Step 4: Create the new project using the below command

vue init webpack myproject

Step 5: Change the directory to the newly created project

cd myproject

Project Structure:

The following project structure will be generated:

Example: Below is the example of the Vuex Store along with the Code Snippet and its Output.

HTML

<!--src/components/Registration.vue-->

<template>
    <div id="registration">
        <h3>Register here</h3>
        <hr>
        <div class="row"
             v-for="user in users">
            <h4>{{ user.name }}</h4>
            <button @click="registerUser(user)">
                  Register
              </button>
        </div>
    </div>
</template>

<script>
    export default {
        computed: {
          users() {
              return this.$store.state.users.filter(user => {
                  return !user.registered;
              });
          }
        },
        methods: {
            registerUser(user) {
                const date = new Date;
                user.registered = true;
                this.$store.state.registrations.push(
                                     {userId: user.id,
                                      name: user.name,
                                      date: date.getMonth()+
                                      '/' + date.getDay()});
            }
        }
    }
</script>

<style scoped>
    #registration {
        box-shadow: 1px 1px 2px 1px #ccc;
        margin: 20px;
        padding: 20px;
        display: inline-block;
        width: 300px;
        vertical-align: top;
    }

    .row h4 {
        display: inline-block;
        width: 70%;
        text-align: left;
        margin: 0 0 10px 0;
    }

    button {
        background-color: lightgreen;
        border: none;
        box-shadow: 1px 1px 1px black;
        font-size: inherit;
        text-align: right;
        cursor: pointer;
    }

    button:hover {
        background-color: green;
    }
</style>

HTML

<!--src/components/Registrations.vue-->

<template>
    <div id="registrations">
        <div class="summary">
            <h3>Registrations</h3>
            <h5>Total: {{ total }}</h5>
        </div>
        <hr>
        <div class="row"
             v-for="registration in registrations">
            <h4>{{ registration.name }}</h4>
            <span @click="unregister(registration)">
              (Unregister)
              </span>
            <div class="date">
                  {{ registration.date }}
              </div>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            unregister(registration) {
                const user =
                      this.$store.state.users.find(user => {
                    return user.id == registration.userId;
                });
                user.registered = false;
                this.$store.state.registrations.splice(
                  this.$store.state.registrations.indexOf(registration), 1);
            }
        },
        computed: {
            registrations() {
                return this.$store.state.registrations;
            },
            total() {
                return this.$store.state.registrations.length;
            }
        }
    }
</script>

<style scoped>
    #registrations {
        box-shadow: 1px 1px 2px 1px #ccc;
        margin: 20px;
        padding: 20px;
        display: inline-block;
        width: 300px;
        vertical-align: top;
        text-align: left;
    }

    .summary {
        text-align: center;
    }

    .row h4 {
        display: inline-block;
        width: 30%;
        margin: 0 0 10px 0;
        box-sizing: border-box;
    }

    .row span {
        width: 30%;
        color: red;
        cursor: pointer;
    }

    .row span:hover {
        color: darkred;
    }

    .date {
        display: inline-block;
        width: 38%;
        text-align: right;
        box-sizing: border-box;
    }
</style>

HTML

<!--src/App.vue-->

<template>
  <div id="app">
    <app-registration></app-registration>
    <app-registrations></app-registrations>
  </div>
</template>

<script>
  import Registration
      from './components/Registration.vue';
  import Registrations
      from './components/Registrations.vue';

export default {
    components: {
        appRegistration: Registration,
        appRegistrations: Registrations
    }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Javascript

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import { store } from './store';

new Vue({
    el: '#app',
    store,
    render: h => h(App)
})

Javascript

// src/store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        registrations: [],
        users: [
            {id: 1, name: 'Gaurav', registered: false},
            {id: 2, name: 'Anjali', registered: false},
            {id: 3, name: 'Ramesh', registered: false},
            {id: 4, name: 'GeeksforGeeks', registered: false}
        ]
    }
});

Explanation: The Vuex store in this example tracks the list of registered users and the list of all users. The unregister method is used to remove a user from the list of registered users, and the total computed property returns the number of registrations.

Output:

Plain Global Object

Plain Global Object points to the use of Global JavaScript Object which we used to store and manage the application’s state. As compared to Vuex, Plain Global Object does not offer any built-in state management mechanisms. Perhaps, we can manually define a global object that can handle changes to it. However, Global Object does not trigger on its own and updates the application. We need to handle updates and make sure about consistency manually. Managing complex states and organizing the code can be challenging tasks while working with Plain Global Objects.

Example: Below is the example of the Plain Global Object along with the Code Snippet and the dedicated Output.

Javascript

// Example.js

const cart = {
    items: [],
    addItem(item) {
        this.items.push(item);
    },
    removeItem(itemId) {
        this.items =
            this.items.filter(item => item.id !== itemId);
    },
    getCartTotal() {
        return this.items.reduce((total, item) =>
            total + item.price, 0);
    },
    clearCart() {
        this.items = [];
    }
};

// Example usage
cart.addItem({ id: 1, name: 'GFG_DSA', price: 10 });
cart.addItem({ id: 2, name: 'GFG_C++', price: 20 });

// [{ id: 1, name: 'GFG_DSA', price: 10 },
    { id: 2, name: 'Product 2', price: 20 }]
console.log(cart.items);
console.log(cart.getCartTotal()); // 30

cart.removeItem(1);
console.log(cart.items); // [{ id: 2, name: 'GFG_C++', price: 20 }]
console.log(cart.getCartTotal()); // 20

cart.clearCart();
console.log(cart.items); // []
console.log(cart.getCartTotal()); // 0

Explanation: The above examples show the states of the plain global object called ‘cart‘ and the calculated total after each purchase. The ‘cart‘ object defines a shipping cart and has the properties and methods to manage it. After adding 2 items to the cart.getCartTotal() returns 30. After removing an item from the cart, it returns 20. After clearing the cart, the cart becomes empty and returns 0.

Output

[
  { id: 1, name: 'GFG_DSA', price: 10 },
  { id: 2, name: 'GFG_C++', price: 20 }
]
30
[ { id: 2, name: 'GFG_C++', price: 20 } ]
20
[]
0

Differences between Vuex Store & Plain Global Object

Parameter	Vuex Store	Plain Global Object
Purpose	Vuex Store is used as a State Management Library for Vue.js applications.	Plain Global Object is used for State Storage.
Centralized Store	There is a Centralised Store in the Vuex Store.	There is no Centralised Store in Plain Global Object.
Built-in Mechanisms	There are built-in mechanisms like mutation, actions, and getters.	No built-in mechanisms support is been seen here.
Testing	Vuex Store supports testing using Vue.js testing utilities.	In Plain Global Object, testing is implemented manually.
Code Organization	Vuex Store offers structure and modularization for state logic in code.	In Plain Global Object, the structure and organization of code are done manually.
Dependency	Prerequisites: Vue.js Framework	Prerequisites: Framework-Indepeneent, can be used in a JS Project.