NuxtJS dispatch 没有加载数据

Question

我已经为以下问题苦苦挣扎了 5 个小时。

我有一个服务文件，其中有 API 个使用 Axios 的调用。在商店中，我有一个使用该服务提取学校列表的操作，然后我将数据提交给突变。如果我控制台记录突变对象上的数据，它会正常工作并显示数据。但是，当我从 onMounted 挂钩内的组件调用 dispatch 时，我得到一个空对象。任何帮助是极大的赞赏。（见下方代码）

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
        }
    }
};

谢谢

Answer 1

您不应该将 await 与 then
一起使用试试这个

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

我假设你的 this.$getSchools() 确实有效，因为我不确定那是什么而且它不是代码的一部分

NuxtJS dispatch 没有加载数据

NuxtJS dispatch is not loading data

vue.js

vuex

nuxt.js