IONIC + Vue.js not working getters in VUEX

Question

Hello developers I'm working with Ionic and Vue+Vuex in this app, but eventually, I can't access my state from my getters for some reason.

As usually the management state is settled for that purpose with actions getters, mutations, and state.

import { createStore } from "vuex";

const urlLogin = "http://localhost:3006/auth";
const urlUser = "http://localhost:3006/user";

const store = createStore({
  state() {
    return {
      userRegisteredState: false,
      allUsersState: [],
    };
  },

  mutations: {
    commit_get_all_users(state, payload) {
      console.log(payload);
      return (state.allUsersState = payload);
    },
  },

  getters: {
    getterGetAllUsers(state) {
      console.log(state);//checking all state (See image )
      console.log(state.allUsersState)//checking only the item I want to consume from state (See image )
       return state.allUsersState;
    },
   
  },

  actions: {
     //=================================================================
     //============================================================
    async getAllUsers({ commit }) {
      fetch(`${urlUser}/get/all/users`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "http://localhost:8100",
        },
      })
        .then((result) => {
          return result.json();
        })
        .then((result) => {
          console.log(result);
          commit("commit_get_all_users", result);
        })
        .catch((error) => {
          console.log(error);
          error;
        });
    },
  },
});

export default store;

then on my component , in this case that one referring to get all users I set this logic:

<template>
  ...some tags...
</template>
<script>

import { mapActions, mapGetters } from "vuex"; 

export default {
  name: "AllUsersComponent",
   data() {
    return {
      allUsers: [],
    };
  },
  methods: {
    ...mapActions(["getAllUsers"]),

    getAllUsersFront() {
      this.$store.dispatch("getAllUsers");
    },
    ...some methods....

  },
  computed: {
    ...mapGetters(["getterGetAllUsers"]),

    getterGetAllUsersFunction() {
      console.log(this.$store.getters.getterGetAllUsers);
      return this.$store.getters.getterGetAllUsers;
    },
  },
  async mounted() {
    this.getAllUsersFront();
  },
  created() {
    this.getAllUsersFront();
    this.getterGetAllUsersFunction;
    console.log(this.getterGetAllUsersFunction);
  },
  watch: {},
};
</script>
<style>
</style>

On my main.js file store is imported according to IONC in this way

import { createApp } from "vue";
import './gapi.js'
import App from "./App.vue";
import router from "./router";
import store from "./store/index"; //importando vuex
import loginComponentTag from "./components/Login";
import allUsersComponentTag from "./components/all-users-component"
// import GoogleSignInButton from 'vue-google-signin-button-directive'

import { IonicVue } from "@ionic/vue";
/* Core CSS required for Ionic components to work properly */
import "@ionic/vue/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/vue/css/normalize.css";
import "@ionic/vue/css/structure.css";
import "@ionic/vue/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/vue/css/padding.css";
import "@ionic/vue/css/float-elements.css";
import "@ionic/vue/css/text-alignment.css";
import "@ionic/vue/css/text-transformation.css";
import "@ionic/vue/css/flex-utils.css";
import "@ionic/vue/css/display.css";

/* Theme variables */
import "./theme/variables.css";


const app = createApp(App)
  .use(IonicVue)
  .use(store) 
  .use(router)
  
app.component("LoginComponent", loginComponentTag);
app.component("AllUsersComponent",allUsersComponentTag)

router.isReady().then(() => {
  
  app.mount("#app");

});

And my vue.config.js is settled in this way:

module.exports = {
  devServer: {
    proxy: "http://localhost:8100",
  },
};

I checked my logs and eventually.

Literally, the situation is that despite having my state populated with data, unless I retrieve the whole state, I can't retrieve a particular item from it, cause the response is nothing. Is there any configuration I'm omitting in this process I need to have in mind?

Ecthyma

for "failed to load components" You may have missed importing ionic components you have used in the template and add adding them to components object.. – Monoatomic

#Suraj this warnings on components guess don't have anything to do with my attempts of retrieving data from my state through getters – Ecthyma

i just could simply put in my template a div for test purpose an still the problem persists – Ecthyma

this.getterGetAllUsersFunction is not a function call... Also is your API getAllUsers working and getting you data? – Monoatomic

is a computed function – Ecthyma

where are you actually trying to use the getter in your code? the sample you provided is hard to follow – Dithyramb

in one of my components in this case AllUsersComponents , which eventually is inserted in one of the views – Ecthyma