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.
0:00/9:56
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.
yo lo veo de esta manera state = data getters = methods jajaja :V
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.
mapGetters cuando necesites cálculos basados en el estado o para acceder a getters personalizados.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.
createStore({
state() {
return {
variable: val,
};
},
getters: {
resultado(state) {
return (param) => /* Procesar state.variable usando param; */;
},
}.
});
<p>{{ resultado(param) }}</p>
import { mapGetters } from "vuex";
export default {
computed: {
...mapState(["resultado"]),
},
};
Jose Alejandro Pantoja Giraldo
yo lo veo de esta manera state = data getters = methods jajaja :V
Uriel Solis Salinas
Pablo Perez
mapGetters cuando necesites cálculos basados en el estado o para acceder a getters personalizados.mapState cuando simplemente requieras acceder directamente a las propiedades del estado, especialmente en situaciones de enlace de datos 1:1.
Erick Estrada
const username = computed(() => store.state.username) const first_name = computed(() => store.getters.first_name)
Jose Luis Barboza Gonzales
good in vue3 composition api
Hanier Morales
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.
Andrés Martínez González
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"]), }, };
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.