235 Outputting Incoming Requests (Messages)

步骤

1、stores/modules/requests/getters.js中添加两个变量

export default {
    requests(state) {
        return state.requests;
    },
    hasRequests(state) {
        return state.requests && state.requests.length > 0;
     }
}

2、components/requests下新增RequestItem.vue用于显示email和message

<template>
    <li>
        <div>
            <a :href="emailLink">{{ email }}</a>
        </div>
        <p>{{ message }}</p>
    </li>
</template>

<script>
export default {
    props: {
        email: {
            type: String,
            required: true,
        },
        message: {
            type: String,
            required: true,
        },
    },
    computed: {
        emailLink() {
            //return 'mailto:' + this.email;
            return `mailto:${this.email}`;
        }
    }
 }
</script>

<style scoped>
li {
  margin: 1rem 0;
  border: 1px solid #ccc;
  padding: 1rem;
}

a {
  color: #3d008d;
  text-decoration: none;
  font-weight: bold;
}

a:hover,
a:active {
  color: #8d007a;
}

p {
  margin: 0.5rem 0 0 0;
}
</style>

3、RequestsReceived.vue

<template>
    <section>
        <base-card>
            <header>
                <h2>Requests Received</h2>
            </header>
            <ul v-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 {
    components: {
        RequestItem,
    },
    computed: {
        receivedRequests() {
            return this.$store.getters["requests/requests"];
        },
        hasRequests() {
            return this.$store.getters["requests/hasRequests"];
        },
    },
};
</script>

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

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

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