241 Sending Coaching Requests Http Requests

步骤

1、actions.js

import axios from 'axios';
import { v4 as uuidv4 } from 'uuid';

export default {
    async contactCoach(context, payload) {
        const newRequest = {
            id: uuidv4(),
            coachId: payload.coachId,
            userEmail: payload.email,
            message: payload.message,
        }

        const response = await axios.post('http://localhost:5216/api/Requests/PostRequest', newRequest)
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });


        context.commit('addRequest', newRequest);
    },

    async loadRequests(context, payload) {
        const response = await fetch('http://localhost:5216/api/Requests/GetRequets');
        const responseData = await response.json();
        console.log(responseData);

        if (!response.ok){
            //error ...
            const error = new Error(responseData.message || 'Failed to fetch!');
            throw error;
        }

        const requests = [];
        for(const key in responseData){
            const request = {
                id: responseData[key].id,
                userEmail: responseData[key].userEmail,
                message: responseData[key].message,
                coachId: responseData[key].coachId,
            };
            requests.push(request);
        }
        context.commit('setRequests', requests);
    }
}

2、mutations.js

export default {
    addRequest(state, payload) {
        state.requests.push(payload);
    },
    setRequests(state, payload) {
        state.requests = payload;
    }
}

3、RequestsReceived.vue

<template>
    <base-dialog :show="!!error" title="An error occurred!" @close="handleError">
        <p>{{ error }}</p>
    </base-dialog>
    <section>
        <base-card>
            <header>
                <h2>Requests Received</h2>
            </header>
            <div v-if="isLoading">
                <base-spinner></base-spinner>
            </div>
            <ul v-else-if="hasRequests">
                <request-item v-for="request in receivedRequests" :key="request.id" :email="request.userEmail"
                    :message="request.message">
                </request-item>
            </ul>
            <h3 v-else>You haven't received any requests yet!</h3>
        </base-card>
    </section>
</template>

<script>
import RequestItem from "@/components/requests/RequestItem.vue";

export default {
    data() {
        return {
            isLoading: false,
            error: null,
        };
    },
    components: {
        RequestItem,
    },
    computed: {
        receivedRequests() {
            return this.$store.getters["requests/requests"];
        },
        hasRequests() {
            return !this.isLoading && this.$store.getters["requests/hasRequests"];
        },
    },
    methods: {
        async loadRequests() {
            try {
                this.isLoading = true;
                await this.$store.dispatch("requests/loadRequests");
                this.isLoading = false;
            } catch (error) {
                this.error = error.message || 'Something went wrong!';
            }

        },
        handleError() {
            this.error = null;
        },
    },
    created() {
        this.loadRequests();
    },
};
</script>

<style scoped>
header {
    text-align: center;
}

ul {
    list-style: none;
    margin: 2rem auto;
    padding: 0;
    max-width: 30rem;
}

h3 {
    text-align: center;
}
</style>