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?