• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

221
Vistas
do you use getters or make http get to retrieve data on mounted? Vue 3 and Vuex

I have any data in list:

<ul> 
  <li v-for="data in allData" :key="data">
    {{ data.name }}
  </li>
</ul>

very simple example but i want to retrieve data from vuex no from component..

mounted() { 
  axios.get("endpoint")
    .then(res => { 
      this.allData = res.data;
    })
    .catch(err => {
      console.log(err);
    }); 
}

This is work but i think i can better to retrieve data from vuex..

I have function in action.js file

[GET_COMPETITOR_ACTION_DATA](context) { 
  axiosinstance.get('competitors').then(res => {
    console.log('res mu' , res); 
    context.commit(GET_COMPETITOR_MUTATION_DATA, res.data); 
  }).catch(err => console.log(err));
}

I also have a function in getters.js

[GET_COMPETITOR](state){ 
  return state.competitor;
}

in mutations.js i have:

[GET_COMPETITOR_MUTATION_DATA](state,payload){ 
  payload.map(allD => state.competitor.push(allD)); 
}

Right now in components:

WHen try

computed: {
  ...mapGetters("competitor", {
    competitor: GET_COMPETITOR
  })

and use:

<ul> 
  <li v-for="data in competitor" :key="data">
    {{ data.name }}
  </li>
</ul>

no work.

when try:

...mapActions("competitor", {
  allDataCompetitorData: GET_COMPETITOR_ACTION_DATA
}),

<ul> 
  <li v-for="data in allDataCompetitorData" :key="data">
    {{ data.name }}
  </li>
</ul>

Also no work..

My question ->

How best to retrieve data from the store for this get load on the mounted or created?

And

Why don't my attempts work?

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Try to wait for response :

async mounted() { 
  await this.allDataCompetitorData()
}

then in template use getter:

<ul> 
  <li v-for="data in competitor" :key="data">
    {{ data.name }}
  </li>
</ul>
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda