238 Fetching Coach Data (GET Http Request)

步骤

1、stores/modules/coaches/mutaions.js中添加setCoaches

export default {
    registerCoach(state, payload){
        state.coaches.push(payload);
    },
    setCoaches(state, payload){
        state.coaches = payload;
    }
};

2、stores/modules/coaches/actions.js中添加loadCoaches

async loadCoaches(context, payload) {
        const response = await fetch('http://localhost:5216/api/Coaches/GetCoaches');
        const responseData = await response.json();
        console.log(responseData);
        const coaches = [];
        for(const key in responseData){
            const coach = {
                id: responseData[key].id,
                firstName: responseData[key].firstName,
                lastName: responseData[key].lastName,
                description: responseData[key].description,
                hourlyRate: responseData[key].hourlyRate,
                areas: responseData[key].areas
            };
            coaches.push(coach);
        }
        context.commit('setCoaches', coaches);
    }

3、CoachesList.vue中添加loadCoaches，并添加到生命周期函数created中，最后给Refresh添加loadCoaches

<template>
    <section>
        <coach-filter @change-filter="setFilters"></coach-filter>
    </section>
    <section>
        <base-card>
            <div class="controls">
                <base-button mode="outline" @click="loadCoaches">Refresh</base-button>
                <base-button v-if="!isCoach" :link="true" to="/register">Register as Coach</base-button>
            </div>
            <ul v-if="hasCoaches">
                <!-- <li v-for="coach in filteredCoaches" :key="coach.id">{{ coach.firstName }}</li> -->
                <coach-item v-for="coach in filteredCoaches" :key="coach.id" :id="coach.id" :firstName="coach.firstName"
                    :lastName="coach.lastName" :rate="coach.hourlyRate" :areas="coach.areas"></coach-item>
            </ul>
            <h3 v-else>No coaches found.</h3>
        </base-card>
    </section>
</template>

<script>
import CoachItem from '@/components/coaches/CoachItem.vue'
import CoachFilter from '@/components/coaches/CoachFilter.vue'

export default {
    components: {
        CoachItem,
        CoachFilter
    },
    data() {
        return {
            activeFilters: {
                frontend: true,
                backend: true,
                career: true
            },
        };
    },
    computed: {
        filteredCoaches() {
            const coaches = this.$store.getters['coaches/coaches'];
            return coaches.filter(coach => {
                if (this.activeFilters.frontend && coach.areas.includes('frontend')) return true;
                if (this.activeFilters.backend && coach.areas.includes('backend')) return true;
                if (this.activeFilters.career && coach.areas.includes('career')) return true;
                return false;
            });
        },
        hasCoaches() {
            return this.$store.getters['coaches/hasCoaches'];
        },
        isCoach() {
            return this.$store.getters['coaches/isCoach'];
        },
    },
    methods: {
        setFilters(updatedFilters) {
           this.activeFilters = updatedFilters;
        },
        loadCoaches() {
            this.$store.dispatch('coaches/loadCoaches');
        },
    },
    created() {
        this.loadCoaches();
    },
};
</script>

<style scoped>
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.controls {
    display: flex;
    justify-content: space-between;
}
</style>