I'm running some test wih vuex, i have a "dirty" way to retrieve a collection from an api:

component:

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

and this is my store.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)
}

this works, but i'm trying to do a more cleaner way using this tutorial https://www.youtube.com/watch?v=Wdmi4k7sFzU at time 2:06:38.

my index remains the same but in my component just

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

but doesn't work, any ideas? or the first aproach is valid?

thanks!