Vuex?

What is Vuex?

Vuex is a state management pattern and library specifically designed for Vue.js applications. It acts as a centralized store that holds the application’s state, serving as a single source of truth for all components. This helps manage shared data across the app in a predictable way, especially in medium to large-scale applications where passing data via props and events becomes cumbersome. Unlike plain global objects, Vuex ensures reactivity — meaning Vue components automatically update when the store’s state changes — and enforces that state can only be modified through explicit mutations, promoting structured data flow.

Vuex follows the Flux architecture pattern, drawing inspiration from libraries like Redux but tailored for Vue’s reactivity system. It was the official state management solution for Vue.js for many years and has been battle-tested in thousands of projects. However, as of Vue 3, Pinia has become the recommended default state management library, though Vuex (version 4) remains compatible and supported for legacy or specific use cases.

Why Use Vuex?

In simple Vue apps, you can manage state with component-level data or props. But as apps grow, state often needs to be shared across distant components. Vuex solves this by providing:

• A centralized store to avoid prop drilling.
• Predictable state changes via mutations and actions.
• Better debugging with tools like Vue DevTools, which can track mutations and time-travel through state changes.
• Modularity for large apps through namespaced modules.

It’s particularly useful for apps with complex data flows, like e-commerce sites or dashboards where multiple components interact with the same data.

Installation

To add Vuex to a Vue.js project:

1. Install via npm or yarn: npm install vuex (for Vue 3, use npm install vuex@next to get version 4).
2. Import and create the store in your main JavaScript file (e.g., main.js).
3. Integrate it into your Vue app instance.

Example (Vue 3 setup):

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');

This sets up a basic store.

For Vue 2, the syntax is similar but uses new Vuex.Store() instead of createStore().

Core Concepts

Vuex revolves around five main concepts: state, getters, mutations, actions, and modules. Here’s a breakdown:

State
The state is the heart of the store — it’s an object that holds your application’s data. Think of it as the single source of truth. Components can access it reactively.

Example:

state: {
  todos: [
    { id: 1, text: 'Buy groceries', done: false },
    { id: 2, text: 'Walk the dog', done: true }
  ],
  user: { name: 'John Doe' }
}

In components, access it via this.$store.state.todos or map it with helpers like mapState.

Getters

Getters are like computed properties for the store. They derive values from the state without modifying it, and they’re cached for efficiency. Use them for filtered or computed data.

getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done);
  },
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length;
  }
}

Access in components: this.$store.getters.doneTodos or via mapGetters

Get S M Sara’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Mutations
Mutations are the only way to change the state. They must be synchronous functions that receive the state as the first argument (and optionally a payload). This ensures traceability.

mutations: {
  addTodo(state, todo) {
    state.todos.push(todo);
  },
  toggleTodo(state, id) {
    const todo = state.todos.find(t => t.id === id);
    if (todo) todo.done = !todo.done;
  }
}

Commit them: this.$store.commit(‘addTodo’, { id: 3, text: ‘New task’, done: false }).

Actions
Actions handle asynchronous operations or complex logic. They don’t mutate state directly but commit mutations. They receive a context object (with commit, state, etc.) and can return promises.

Example:

actions: {
  async fetchTodos({ commit }) {
    const response = await fetch('/api/todos');
    const todos = await response.json();
    commit('setTodos', todos);
  },
  incrementIfOdd({ commit, state }) {
    if (state.count % 2 === 1) {
      commit('increment');
    }
  }
}

Dispatch them: this.$store.dispatch(‘fetchTodos’) or via mapActions.

Key difference: Mutations are synchronous for direct state changes; actions can be async and orchestrate multiple mutations.

Modules

For large apps, split the store into modules to avoid a monolithic structure. Each module can have its own state, getters, mutations, and actions. Namespacing prevents conflicts.

Example:

// userModule.js
export default {
  namespaced: true,
  state: { name: 'John' },
  mutations: {
    setName(state, name) {
      state.name = name;
    }
  }
};

// store.js
import user from './userModule';
export default createStore({
  modules: { user }
});

Access:

this.$store.state.user.name or commit this.$store.commit(‘user/setname’, ‘Mick’)

Usage in Components

In Vue components, interact with the store using:

• Direct access: this.$store.state, this.$store.commit, etc.
• Helper functions: Import mapState, mapGetters, mapMutations, mapActions from ‘vuex’ to map them to computed or methods.

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

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

This keeps components clean and focused.

Deprecation Notes and Alternatives

Vuex is not deprecated but is no longer the default recommendation for new Vue 3 projects. The Vue team now promotes Pinia, which offers a simpler API, better TypeScript support, and no need for mutations (actions can directly modify state). Pinia is modular by default and integrates seamlessly with Vue 3’s Composition API.

If starting fresh, consider Pinia. For migrating from Vuex, tools exist to ease the transition. However, Vuex remains viable for existing apps or if you prefer its strict mutation-based approach.

Vuex vs Pinia