Tengo algún dato en la lista:
<ul> <li v-for="data in allData" :key="data"> {{ data.name }} </li> </ul>
ejemplo muy simple, pero quiero recuperar datos de vuex no del componente ...
mounted() { axios.get("endpoint") .then(res => { this.allData = res.data; }) .catch(err => { console.log(err); }); }
Esto es trabajo, pero creo que puedo recuperar mejor los datos de vuex.
Tengo una función en el archivo action.js
[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)); }
También tengo una función en getters.js
[GET_COMPETITOR](state){ return state.competitor; }
en mutations.js
tengo:
[GET_COMPETITOR_MUTATION_DATA](state,payload){ payload.map(allD => state.competitor.push(allD)); }
Ahora mismo en componentes:
cuando intente
computed: { ...mapGetters("competitor", { competitor: GET_COMPETITOR })
y use:
<ul> <li v-for="data in competitor" :key="data"> {{ data.name }} </li> </ul>
ningún trabajo.
cuando intente:
...mapActions("competitor", { allDataCompetitorData: GET_COMPETITOR_ACTION_DATA }), <ul> <li v-for="data in allDataCompetitorData" :key="data"> {{ data.name }} </li> </ul>
ademas no hay trabajo..
Mi pregunta ->
¿Cuál es la mejor manera de recuperar datos de la tienda para que esto se cargue en lo montado o creado?
Y
¿Por qué no funcionan mis intentos?
Intenta esperar respuesta:
async mounted() { await this.allDataCompetitorData() }
luego en la plantilla use getter:
<ul> <li v-for="data in competitor" :key="data"> {{ data.name }} </li> </ul>