VueJS - Getters

Using Getters in Vuex for Derived State

Getters in Vuex are used to compute derived state based on the store's state. They are similar to computed properties in Vue components and are cached based on their dependencies. This guide covers how to define and use getters in Vuex.

Defining Getters

Basic Getters

To define a getter, add a getters property to your Vuex store. Getters receive the state as their first argument:

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count: state => state.count
  }
});
                

Using Getters in Components

You can access getters in your components using the this.$store.getters object:

// src/components/Counter.vue



                

Advanced Getters

Getters with Parameters

If you need to pass parameters to a getter, return a function from the getter:

// src/store/index.js
export default new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Learn Vuex', done: false }
    ]
  },
  getters: {
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id);
    }
  }
});
                

Using Getters with Parameters

You can call getters with parameters in your components:

// src/components/Todo.vue



                

Combining Getters

You can use one getter inside another getter by accessing the getters object:

// src/store/index.js
export default new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Learn Vuex', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    }
  }
});
                

Using Combined Getters

You can access combined getters in your components:

// src/components/DoneTodos.vue



                

Example Application

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

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Learn Vuex', done: false }
    ]
  },
  getters: {
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id);
    },
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    }
  }
});

// src/components/Todo.vue




// src/components/DoneTodos.vue




// 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');
                

Best Practices

Follow these best practices when using getters in Vuex:

• Keep Getters Simple: Keep your getters simple and focused on computing derived state.
• Use Getters for Computed State: Use getters to compute derived state rather than storing derived state directly in the store.
• Leverage Caching: Take advantage of Vuex getters' caching mechanism to improve performance.
• Document Your Getters: Document your getters to make them easier to understand and maintain.
• Test Your Getters: Write tests for your getters to ensure they behave as expected and handle edge cases.

Summary

This guide provided an overview of using getters in Vuex for derived state, including defining and using basic and advanced getters. By understanding and utilizing getters, you can compute derived state efficiently and keep your store state simple and manageable.