What Are Vuex Getters in Vue.js?

Vuex getters in Vue.js

Vuex getters are functions in a Vuex store that allow you to compute the derived state from the store's state. They provide a way to retrieve and compute values from the store's state in a reactive and efficient manner. Getters are similar to computed properties in Vue components but for Vuex store state.

Key points about Vuex getters

Here are some key points about Vuex getters.

1. Accessing State: Getters provide a way to access the state of the Vuex store. They can retrieve values from the state and perform computations on them.
2. Reactivity: Getters are reactive, meaning that they will automatically re-evaluate their value whenever the state they depend on changes. This ensures that your UI stays up-to-date with the state of the application.
3. Derived State: Getters are useful for deriving new states from existing states. They allow you to compute values based on the current state of the application, making it easy to access and work with derived data.
4. Composable: Getters can depend on other getters, allowing you to compose complex logic from smaller, reusable functions. This makes your code more modular and easier to maintain.
5. Memoization: Vuex automatically caches the results of getters, so if the underlying state hasn't changed, the getter won't recompute its value. This can lead to performance improvements, especially for expensive computations.
6. Accessing Getters: Getters are accessed using store.getters Vue components. You can also use mapGetters a helper function to map getters to computed properties in components.

Here's an example of how getters are defined and used in a Vuex store.

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue.js', done: true },
      { id: 2, text: 'Build something with Vuex', done: false },
      { id: 3, text: 'Master Vuex getters', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    pendingTodos: (state, getters) => {
      return state.todos.filter(todo => !getters.doneTodos.includes(todo));
    }
  }
});

export default store;

In this example, we have two getters: doneTodos and pendingTodos. doneTodos returns an array of todos that are marked as done, while pendingTodos returns an array of todos that are not marked as done. These getters are then accessed in Vue components using store.getters.doneTodos and store.getters.pendingTodos.

// MyComponent.vue
<template>
  <div>
    <h2>Done Todos</h2>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
    <h2>Pending Todos</h2>
    <ul>
      <li v-for="todo in pendingTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doneTodos',
      'pendingTodos'
    ])
  }
}
</script>

In the component above, we use mapGetters to map the getters to computed properties, which allows us to use them directly in the template as this.doneTodos and this.pendingTodos.