No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Getters

7/19
Recursos

Aportes 7

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Los getters pr谩cticamente vienen siendo lo mismo que las propiedades computadas de Vue.js, con la diferencia que no pertenecen a un componente como tal, sino al manejo de estado.

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 鈥渋d鈥 y devuelve el objeto de producto correspondiente a ese id. El segundo toma un par谩metro de entrada 鈥減rice鈥 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.

yo lo veo de esta manera
state = data
getters = methods
jajaja :V

  • Utiliza mapGetters cuando necesites c谩lculos basados en el estado o para acceder a getters personalizados.
  • Emplea mapState cuando simplemente requieras acceder directamente a las propiedades del estado, especialmente en situaciones de enlace de datos 1:1.
const username = computed(() => store.state.username)
const first_name = computed(() => store.getters.first_name)

Una de las ventajas de los getters es que te permiten manipular la informaci贸n de los datos, sin la necesidad de modificar la forma en la que est谩n estructurados.

C贸mo mandar par谩metros a los getters

En el store

createStore({
	state() {
		return {
			variable: val,
		};
	},
	getters: {
		resultado(state) {
			return (param) => /* Procesar state.variable usando param; */;
		},
	}.
});

En el componente destino

<p>{{ resultado(param) }}</p>
import { mapGetters } from "vuex";

export default {
	computed: {
		...mapState(["resultado"]),
	},
};