Getters

Clase 7 de 19 • Curso de Vue.js: Manejo del Estado con Vuex

Uriel Solis Salinas

student•

Getters

Los getters son funciones que nos permiten obtener datos del estado de la aplicación de una manera más estructurada y organizada. . Se definen dentro de la sección getters del objeto store de Vuex y pueden ser accedidos desde cualquier componente de la aplicación que esté conectado al store. La sintaxis para definir un getter es la siguiente:

import { createStore } from "vuex";

const store = createStore({
  state: {
    // state variables
  },
  getters: {
    getterName: (state) => {
      // getter logic
      return someValue
    }
  },
  mutations: {
    // mutations
  },
  actions: {
    // actions
  }
});

export default store;

El nombre del getter se define como una propiedad del objeto getters, seguido de una función que toma el estado actual como argumento y devuelve un valor calculado basado en ese estado. El valor devuelto por el getter es reactivamente actualizado cada vez que se produce un cambio en el estado. . Un ejemplo de uso de getters en Vuex sería el siguiente:

import { createStore } from "vuex";

const store = createStore({
state: {
    products: [
      { id: 1, name: 'Product 1', price: 10 },
      { id: 2, name: 'Product 2', price: 20 },
      { id: 3, name: 'Product 3', price: 30 }
    ]
  },
  getters: {
    getProductById: (state) => (id) => {
      return state.products.find(product => product.id === id)
    },
    getProductsByPrice: (state) => (price) => {
      return state.products.filter(product => product.price === price)
    }
  },
  mutations: {
    // mutations
  },
  actions: {
    // actions
  }
});

export default store;

En este ejemplo, se definen dos getters: getProductById y getProductsByPrice. . El primero toma un parámetro de entrada "id" y devuelve el objeto de producto correspondiente a ese id. El segundo toma un parámetro de entrada "price" y devuelve un array de objetos de productos que tienen el precio dado. Estos getters pueden ser utilizados en cualquier componente conectado al store para obtener información específica del estado de la aplicación de una manera más sencilla y organizada.

Getters

Introducción

¿Qué es VUEX y para qué sirve?

Manejo de estado

Patrón FLUX

Conceptos básicos

Instalación y boilerplate de Vuex

Estado simple con Options API

State

Getters

Mutations

Actions

Organización de código

Helpers

Modules

Espacios de nombres

Modelo de datos

Caso de uso: ChatApp con Vuex

Normalización

Canales

Mensajes

Canales y Mensajes

Contactos

Cierre del curso

Despedida