Vuex State Management Explained — Centralized Store

In this tutorial, you will learn about Vuex State Management Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vuex is a state management pattern and library for Vue applications, providing a centralized store with strict rules for predictable state mutations.

What You'll Learn

• Vuex store structure (state, getters, mutations, actions)
• Modules for organization
• mapState, mapGetters, mapMutations, mapActions
• Actions vs mutations
• Vuex vs Pinia comparison

Why It Matters

Vuex provides a predictable state container for complex applications. Centralized state management prevents prop drilling, ensures data consistency, and enables time-travel debugging.

import { createStore } from "vuex";

const store = createStore({
  state: {
    user: null,
    tasks: [],
  },
  getters: {
    isAuthenticated: (state) => !!state.user,
    pendingTasks: (state) => state.tasks.filter((t) => !t.done),
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user;
    },
    ADD_TASK(state, task) {
      state.tasks.push(task);
    },
    TOGGLE_TASK(state, taskId) {
      const task = state.tasks.find((t) => t.id === taskId);
      if (task) task.done = !task.done;
    },
  },
  actions: {
    async login({ commit }, credentials) {
      const user = await api.login(credentials);
      commit("SET_USER", user);
    },
    async fetchTasks({ commit }) {
      const tasks = await api.getTasks();
      tasks.forEach((t) => commit("ADD_TASK", t));
    },
  },
});

Expected output: A centralized store managing authentication state and tasks, with actions for async operations and mutations for synchronous state changes.