NuxtJS dispatch is not loading data-CodePudding

I've been struggling for 5 hours with the following issue.

I have a service file where I have API calls using Axios. In the store, I have an action that uses the service to pull a list of schools, then I commit the data to the mutations. If I console log the data on the mutation object, it works correctly and shows the data. However, when I call dispatch from the component inside the onMounted hook, I get an empty object. Any help is greatly appreciated. (see the code below)

store/schools.js

export const state = () => ({
    mySchools: []
});

export const mutations = {
    getSchools(state, data) {
        state.schools = data;
        console.log(state.schools); // works;
    }
};

export const actions = {
    async getMySchools({ commit }) {
        await this.$getSchools().then(response => {
            commit("getSchools", response.data);
        });
    }
};

portal/dashboard.vue

import {onMounted, ref, useStore} from "@nuxtjs/composition-api";

export default {
    layout: 'portal',
    setup() {
        const store = useStore();
        const schools = ref([]);
         onMounted(async() => {
            await store.dispatch('schools/getMySchools'); // is not pulling data
            schools.value = store.state.schools.mySchools;
            console.log(schools); // empty
        });
        return {
            schools
        }
    }
};

Thank you

CodePudding user response：

You shouldn't use await with then
try this

 async getMySchools({ commit }) {
    const response = await this.$getSchools();
    commit("getSchools", response.data);
}

I'm assuming that your this.$getSchools() actually works since I'm not sure what that is and it's not part of the code