NuxtJS中onMounted调用store.dispatch无法获取state数据问题求助

问题根因 #

• 字段名不匹配：你在store的state中声明的存储学校列表的字段是mySchools，但在getSchools mutation中，错误地将接口返回数据赋值给了不存在的state.schools字段，导致mySchools始终保持初始空数组状态。
• 可选优化点：async/await和then混合使用的写法不规范，虽然不会导致功能问题，但统一语法更便于后续维护。

修正代码 #

1. store/schools.js #

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

export const mutations = {
    getSchools(state, data) {
        // 修正字段名，赋值给提前声明的mySchools
        state.mySchools = data;
        console.log(state.mySchools);
    }
};

export const actions = {
    async getMySchools({ commit }) {
        // 统一使用async/await语法
        const response = await this.$getSchools()
        commit("getSchools", response.data);
    }
};

2. 组件可选优化：用计算属性关联state #

无需手动在dispatch后赋值，直接通过计算属性自动响应state的变化，写法更简洁且响应性更稳定：

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

export default {
    layout: 'portal',
    setup() {
        const store = useStore();
        // 用计算属性直接关联store中的mySchools
        const schools = computed(() => store.state.schools.mySchools);
        
        onMounted(async() => {
            await store.dispatch('schools/getMySchools');
        });
        
        return {
            schools
        }
    }
};

内容的提问来源于stack exchange，提问作者rafiaTech