VueJS - Vuex Basics

Introduction to State Management with Vuex

Vuex is a state management pattern and library for VueJS applications. It serves as a centralized store for all the components in an application, providing a predictable state management pattern. This guide covers the basics of using Vuex, including setting up a store, state, mutations, actions, and getters.

Setting Up Vuex

Step 1: Install Vuex

If you haven't already installed Vuex, you can do so using npm or yarn:

# Install Vuex using npm
$ npm install vuex --save

# Install Vuex using yarn
$ yarn add vuex
                

Step 2: Create a Store

Create a new file for the Vuex store and set it up:

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});
                

Step 3: Integrate the Store with Vue

Import the store and integrate it with your Vue instance:

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App),
}).$mount('#app');
                

Using Vuex

State

The state is the single source of truth in a Vuex store. You can access the state in your components using the this.$store.state object:

// src/components/Counter.vue



                

Mutations

Mutations are the only way to change the state in a Vuex store. They are synchronous functions that receive the state as the first argument:

// src/store/index.js
mutations: {
  increment(state) {
    state.count++;
  }
}
                

Actions

Actions are used to perform asynchronous operations. They commit mutations to change the state:

// src/store/index.js
actions: {
  increment({ commit }) {
    commit('increment');
  }
}
                

Getters

Getters are used to compute derived state based on the store state. They are like computed properties for the store:

// src/store/index.js
getters: {
  count: state => state.count
}
                

Example Application

Here is a simple example application that demonstrates the use of Vuex:

// src/components/Counter.vue




// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    count: state => state.count
  }
});
                

Best Practices

Follow these best practices when using Vuex:

• Keep State Normalized: Keep your state normalized to avoid redundancy and make it easier to manage.
• Use Namespaced Modules: Use namespaced modules to organize your store and avoid naming conflicts.
• Keep Mutations Simple: Keep your mutations simple and focused on changing the state.
• Handle Async Logic in Actions: Handle all asynchronous logic in actions, not in mutations or components.
• Document Your Store: Document your state, mutations, actions, and getters to make your store easier to understand and maintain.

Summary

This guide provided an introduction to state management with Vuex, including setting up a store, using state, mutations, actions, and getters. By understanding and utilizing Vuex, you can manage the state of your VueJS applications in a predictable and efficient manner.