0

estoy intentando obtener datos de una API con AXIOS y VUEX (la API fue creada con Nodejs y MongoDB) acá esta mi store

export default new Vuex.Store(
{state: {
productos: [],
},
mutations: {
setProductos(state, payload){
  state.productos = payload;
}
},
actions: {
getProductos({commit}){
  this.axios.get('/productos')
  .then((res) => {
    commit('setProductos', res.data)
  })
}
},

acá esta mi componente Productos

<v-simple-table>
            <template v-slot:default>
            <thead>
                <tr>
                <th class="text-left">
                    Nombre
                </th>
                <th class="text-left">
                    Precio Publico
                </th>
                <th class="text-left">
                    Ver datos
                </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item) in productos" :key="item.index">
                    <td>{{ item.nombre }}</td>
                    <td>
                        <v-chip outlined color="primary" dark>${{ item.precioPublico }}</v-chip>
                    </td>
                </tr>
            </tbody>
            </template>
        </v-simple-table>

export default {
name: 'Producto',
data() {
    return {
    }
},
methods: {
    ...mapActions(['getProductos'])
},
created() {
    this.getProductos()
},
computed: {
    ...mapState(['productos'])
}
}
</script>

no se exactamente en que estoy fallando pero sin duda, creo que el problema esta a la hora de programar el Actions, si alguien tuvo algún problema similar y me podría ayudar se lo agradecería

y este es el error que me tira la consola introducir la descripción de la imagen aquí

2
  • 1
    El problema puede estar porque en el store esttás poniendo this.axios.get(... y axios no existe en ese ámbito. Tendrías que importar axios en el store import axios from 'axios' y luego usar directamente axios.get(... Commented el 10 dic. 2020 a las 2:53
  • muchísimas gracias, me sirvió la ayuda
    – CarloS
    Commented el 10 dic. 2020 a las 21:55

1 respuesta 1

1

Te esta faltando importar el modulo de axios

import axios from 'axios'

intenta hacerlo de esta manera

export default new Vuex.Store(
    {
        state: {
            productos: [],
        },
        mutations: {
            setProductos(state, payload) {
                state.productos = payload;
            }
        },
        actions: {
            getProductos({ commit }) {
                import axios from 'axios';
                axios.get('/productos')
                    .then((res) => {
                        commit('setProductos', res.data)
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        }
    });

siempre maneja tus excepciones para saber en que te esta fallando

suponiendo claro que ya tengas instalado Axios, si no ejecuta npm install -g axios

2
  • muchísimas gracias, esto me ayudo, tenia instalado Axios Vue, pero no sabia que tenia que importarlo, pensé que lo reconocía igual que el componente
    – CarloS
    Commented el 10 dic. 2020 a las 21:55
  • Que bueno que te ayudo, podrias ayudar a marcar la respuesta como correcta? asi los demas sabran que solucion tendria Commented el 11 dic. 2020 a las 2:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.