Vue.js for Beginners 2024 #VueJs Part 6 : State Management with Vuex

Managing state in a Vue.js application can become complex as the app grows. In this post, we’ll explore how to effectively manage state using Vuex, the official state management library for Vue.js.

- What is Vuex?
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, making it easier to share data between them. This helps in managing the state in a predictable way.

- Installing Vuex
To get started with Vuex, you first need to install it. If you’re using Vue CLI, you can select to install it when creating your project. If you already have a project, install it via npm:

npm install vuex@next --save

Setting Up Vuex

- Create a Store
Create a new folder named store in your srcdirectory, and within that folder, create a file called index.js. This file will hold the Vuex store configuration. In this example, we’ll create a simple store to add and subtract a count value.

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0, // Example state
  },
  mutations: {
    increment(state) {
      state.count++; // Mutates the state
    },
    decrement(state) {
      state.count--; // Mutates the state
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment'); // Commits the mutation
    },
    decrement({ commit }) {
      commit('decrement'); // Commits the mutation
    },
  },
  getters: {
    getCount(state) {
      return state.count; // Access state value
    },
  },
});

- Integrate Vuex Store into Your Application
Next, integrate the Vuex store into your main Vue instance. Edit your main.js file:

import Vue from 'vue';
import App from './App.vue';
import store from './store'; // Import the store

new Vue({
  el: '#app',
  store, // Add the store to the Vue instance
  render: h => h(App),
});

Using Vuex in Components

Now that Vuex is set up, let’s see how to use it in your components. Here’s an example of how to access and modify the state from a component.

- Accessing State
You can access the state using this.$store.state:

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount; // Access getter
    },
  },
  methods: {
    increment() {
      this.$store.dispatch('increment'); // Dispatch action
    },
    decrement() {
      this.$store.dispatch('decrement'); // Dispatch action
    },
  },
};
</script>

Conclusion

In this post, we’ve covered the basics of state management in Vue.js using Vuex. With Vuex, managing state in your applications becomes much more structured and predictable. In the next part of our series, we’ll explore more advanced topics like modules and asynchronous actions in Vuex.

I hope you found this post helpful! Feel free to leave any questions or comments below 🚀.