El getter de Nuxt Store no funciona, el ID proporcionado a la carga útil no es un entero + Error: [vuex] no mutar el estado de la tienda vue fuera de los manipuladores de mutación.

19 Jul, 2023 Programación 0

Estoy tratando de crear una página de detalles del producto. La página de detalles se llama _id.
Cuando se abre, el id se reemplaza por el id del producto. Al abrir la página, el estado se establece con los datos obtenidos de una API.

Después de eso, estoy tratando de usar una propiedad computada que se refiere a un getter llamado getProduct() con un id (this.$route.params.id) en el payload.

Así es como se ve mi archivo _id.vue:

methods: {
  ...mapActions("products", ["fetchProducts"]),
  ...mapGetters("products", ["getProduct"]),
},
async mounted() {
  this.fetchProducts()
},
computed: {
  product() {
    return this.getProduct(this.$route.params.id)
  }
}

Así es como se ve mi archivo de la tienda llamado products.js:

import axios from "axios"

export const state = () => ({
  producten: []
})

export const mutations = {
  setProducts(state, data) {
    state.producten = data
  }
}

export const getters = {
  getProduct(state, id) {
    console.log(id)
    return state.producten.filter(product => product.id = id)
  }
}

export const actions = {
  async fetchProducts({ commit }) {
    await axios.get('/api/products')
      .then(res => {
        var data = res.data
        commit('setProducts', data)
      })
      .catch(err => console.log(err));
  }
}

Lo que funciona es crear el estado, pero cuando intento usar el getter algo sale mal.
Como puedes ver, uso console.log() para mostrar el id proporcionado. Esto muestra lo siguiente:

Imagen

También obtengo el error: Error: [vuex] no mutar el estado de la tienda vuex fuera de los manipuladores de mutación.

Lo cual no estoy haciendo hasta donde sé.

Nota: estos errores se registran tantas veces como la longitud de mi array de estado.

davy.ai

July 19, 2023 at 5:19 pm

Solución para crear una página de detalle de producto usando Vue.js y la tienda Vuex

Para crear una página de detalle de producto usando Vue.js y la tienda Vuex, sigue los siguientes pasos:

Crea un nuevo componente de archivo único de Vue.js para la página de detalle de producto nombrado _id.vue.
En _id.vue, importa lo siguiente desde el paquete vuex:
```
import { mapActions, mapGetters } from "vuex";
```
Esto te permitirá usar las funciones mapActions y mapGetters para mapear las acciones y los getters de Vuex a métodos y propiedades computadas del componente, respectivamente.
En la sección methods de _id.vue, mapea la acción fetchProducts del módulo products en la tienda Vuex usando mapActions:
```
methods: {
 ...mapActions("products", ["fetchProducts"]),
}
```
Esto mapeará la acción fetchProducts a un método fetchProducts que puedes llamar desde el componente.
En el método del ciclo de vida async mounted de _id.vue, llama al método fetchProducts para obtener los datos del producto desde la API y almacenarlos en la tienda Vuex:
```
async mounted() {
 await this.fetchProducts();
},
```
Esto obtendrá los datos del producto desde la API y los almacenará en la tienda Vuex cuando el componente se monte.
En la sección computed de _id.vue, define una propiedad computada llamada product que hace referencia al getter getProduct del módulo products en la tienda Vuex, pasando el parámetro id (this.$route.params.id) en la carga útil:
```
computed: {
 ...mapGetters("products", ["getProduct"]),
 product() {
   return this.getProduct(this.$route.params.id);
 },
},
```
Esto mapeará el getter getProduct a una propiedad computada product que puedes usar en la plantilla del componente para mostrar los datos del producto.
En el módulo products de la tienda Vuex (products.js), define un objeto de estado con un arreglo vacío producten:
```
export const state = () => ({
 producten: [],
});
```
Esto definirá una parte del estado en la que puedes almacenar los datos del producto.
Define una mutación llamada setProducts que actualice el estado producten con los datos de la API:
```
export const mutations = {
 setProducts(state, data) {
   state.producten = data;
 },
};
```
Esto te permitirá actualizar el estado producten con los datos de la API.
Define un getter llamado getProduct que retorne un objeto de producto con el id especificado:
```
export const getters = {
 getProduct: (state) => (id) => {
   return state.producten.find((p) => p.id === id);
 },
};
```
Esto te permitirá obtener un objeto de producto con el id especificado desde el estado producten.
Define una acción llamada fetchProducts que obtenga datos desde la API y realice una mutación para actualizar el estado producten:
```
export const actions = {
 async fetchProducts({ commit }) {
   try {
     const response = await axios.get("/api/products");
     const products = response.data;
     commit("setProducts", products);
   } catch (error) {
     console.error(error);
   }
 },
};
```
Esto te permitirá obtener datos desde la API y actualizar el estado producten con los datos de respuesta mediante la ejecución de la mutación setProducts.
Para usar la propiedad computada product en la plantilla del componente, puedes usar la siguiente sintaxis:
```
<template>
  <div>
    <h1>{{ product.title }}</h1>
    {{ product.description }}
    Precio: {{ product.price }}
  </div>
</template>
```
Esto mostrará los datos del producto obtenidos desde la propiedad computada product en la plantilla del componente.

¡Y eso es todo! Siguiendo estos pasos, deberías poder crear una página de detalle de producto que obtenga datos desde una API usando Vue.js y la tienda Vuex, y muestre los datos en la plantilla del componente.

Answer

davy.ai

July 19, 2023 at 5:19 pm
Solución para crear una página de detalle de producto usando Vue.js y la tienda Vuex

Para crear una página de detalle de producto usando Vue.js y la tienda Vuex, sigue los siguientes pasos:
1. Crea un nuevo componente de archivo único de Vue.js para la página de detalle de producto nombrado _id.vue.
2. En _id.vue, importa lo siguiente desde el paquete vuex:
```
import { mapActions, mapGetters } from "vuex";
```
  Esto te permitirá usar las funciones mapActions y mapGetters para mapear las acciones y los getters de Vuex a métodos y propiedades computadas del componente, respectivamente.
3. En la sección methods de _id.vue, mapea la acción fetchProducts del módulo products en la tienda Vuex usando mapActions:
```
methods: {
 ...mapActions("products", ["fetchProducts"]),
}
```
  Esto mapeará la acción fetchProducts a un método fetchProducts que puedes llamar desde el componente.
4. En el método del ciclo de vida async mounted de _id.vue, llama al método fetchProducts para obtener los datos del producto desde la API y almacenarlos en la tienda Vuex:
```
async mounted() {
 await this.fetchProducts();
},
```
  Esto obtendrá los datos del producto desde la API y los almacenará en la tienda Vuex cuando el componente se monte.
5. En la sección computed de _id.vue, define una propiedad computada llamada product que hace referencia al getter getProduct del módulo products en la tienda Vuex, pasando el parámetro id (this.$route.params.id) en la carga útil:
```
computed: {
 ...mapGetters("products", ["getProduct"]),
 product() {
   return this.getProduct(this.$route.params.id);
 },
},
```
  Esto mapeará el getter getProduct a una propiedad computada product que puedes usar en la plantilla del componente para mostrar los datos del producto.
6. En el módulo products de la tienda Vuex (products.js), define un objeto de estado con un arreglo vacío producten:
```
export const state = () => ({
 producten: [],
});
```
  Esto definirá una parte del estado en la que puedes almacenar los datos del producto.
7. Define una mutación llamada setProducts que actualice el estado producten con los datos de la API:
```
export const mutations = {
 setProducts(state, data) {
   state.producten = data;
 },
};
```
  Esto te permitirá actualizar el estado producten con los datos de la API.
8. Define un getter llamado getProduct que retorne un objeto de producto con el id especificado:
```
export const getters = {
 getProduct: (state) => (id) => {
   return state.producten.find((p) => p.id === id);
 },
};
```
  Esto te permitirá obtener un objeto de producto con el id especificado desde el estado producten.
9. Define una acción llamada fetchProducts que obtenga datos desde la API y realice una mutación para actualizar el estado producten:
```
export const actions = {
 async fetchProducts({ commit }) {
   try {
     const response = await axios.get("/api/products");
     const products = response.data;
     commit("setProducts", products);
   } catch (error) {
     console.error(error);
   }
 },
};
```
  Esto te permitirá obtener datos desde la API y actualizar el estado producten con los datos de respuesta mediante la ejecución de la mutación setProducts.
10. Para usar la propiedad computada product en la plantilla del componente, puedes usar la siguiente sintaxis:
```
<template>
  <div>
    <h1>{{ product.title }}</h1>
    {{ product.description }}
    Precio: {{ product.price }}
  </div>
</template>
```
  Esto mostrará los datos del producto obtenidos desde la propiedad computada product en la plantilla del componente.
¡Y eso es todo! Siguiendo estos pasos, deberías poder crear una página de detalle de producto que obtenga datos desde una API usando Vue.js y la tienda Vuex, y muestre los datos en la plantilla del componente.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

El getter de Nuxt Store no funciona, el ID proporcionado a la carga útil no es un entero + Error: [vuex] no mutar el estado de la tienda vue fuera de los manipuladores de mutación.

Answer

davy.ai

Solución para crear una página de detalle de producto usando Vue.js y la tienda Vuex