Estoy ejecutando una prueba con vuex, tengo una forma "sucia" de recuperar una colección de una API:

componente:

 import { mapState, mapActions, mapGetters } from "vuex"; export default { computed: { ...mapState(["categories"]), ...mapGetters(["allCategories"]) ... created(){ this.getCategories(); }, ... methods: { ...mapActions(['getCategories']), }

y esta es mi tienda.js

 import axios from 'axios'; export const state = () => ({ categories: [], }); export const getters = { allCategories: state => state.categories }; export const actions = { async getCategories({ commit }) { const response = await axios.get( "apiurl" ); console.log(response.data.data) commit("setCategories", response.data); }, }; export const mutations = { setCategories: (state,categories) => (state.categories = categories) }

esto funciona, pero estoy tratando de hacerlo de una manera más limpia usando este tutorial https://www.youtube.com/watch?v=Wdmi4k7sFzU en el tiempo 2:06:38.

mi índice sigue siendo el mismo pero en mi componente solo

 computed: { categories(){ return this.$store.getters.allCategories() } },

pero no funciona, alguna idea? o el primer enfoque es válido?

¡Gracias!