How to share the state from vuex store to all child components

In Vue.js applications, Vuex is a powerful state management library that effectively manages and shares global state data. Sharing state from the Vuex store to all child components can be achieved through the following steps:

Step 1: Create and Initialize Vuex Store

First, create a Vuex store where you define your state, mutations, actions, and getters.

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // Define state
    count: 0
  },
  mutations: {
    // State mutation functions
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // Asynchronous operations
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

Step 2: Inject Vuex Store into Root Component

Inject the created store into your root Vue instance. This way, the store will be available to all child components, which can access it via this.$store.

javascript
import Vue from 'vue';
import App from './App.vue';
import store from './store';

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

Step 3: Use Vuex Store in Child Components

Child components can read and modify state from the store in multiple ways:

Using mapState Helper Function

mapState helps map store data to local computed properties.

javascript
import { mapState } from 'vuex';

export default {
  computed: mapState({
    // Map this.count to store.state.count
    count: state => state.count
  })
}

Using mapGetters Helper Function

If you define getters in the store, mapGetters adds them to local computed properties.

javascript
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doneTodosCount', // Assume you have a getter named doneTodosCount
    ])
  }
}

Using mapMutations and mapActions Helper Functions

These functions help map store mutations and actions to component methods.

javascript
import { mapMutations, mapActions } from 'vuex';

export default {
  methods: {
    ...mapMutations([
      'increment', // Maps `this.increment()` to `this.$store.commit('increment')`
    ]),
    ...mapActions([
      'incrementAsync' // Maps `this.incrementAsync()` to `this.$store.dispatch('incrementAsync')`
    ])
  }
}

Summary

Through this process, the Vuex state is initialized and injected into the root component, then conveniently used in child components via helper functions. This approach ensures state consistency and reactive updates, making it suitable for large projects or scenarios requiring shared state across multiple components.