使用路由时从 vuex 存储中获取特定数据

Question

所以我是 Vue 的新手，并且在过去一两周内一直在学习。我似乎无法弄清楚如何在PhysicianProfile.vue 组件上获取特定的医生数据。我在商店中有我的模拟数据，我正在将该信息传递给PhysicianListing.vue，这是我查看列表的主页（循环数据）。

在PhysicianFullListing.vue 中，我正在传递一个期待对象的医师道具，并且正在构建PhysicianListing.vue 上的列表卡。我已设置路由来构建我们的 SEO 友好 URL (/physician/profile/firstName-lastName-designation)。

我的问题是如何只为我当前在个人资料页面上查看的医生取回数据？看起来很简单，但我完全错过了我需要做的事情。对此的任何帮助将不胜感激。谢谢。

store/store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        physicians: [
            {
                id: 1,
                name: 'Emily Been, MD',
                firstName: 'Emily',
                lastName: 'Been',
                designation: 'MD',
                specialty: 'Internal Medicine',
                locationDistance: 14,
                photo: 'https://placehold.it/75x75',
                location: {
                    title: 'TriStar Centennial',
                    address: '2300 Patterson St',
                    city: 'Nashville',
                    state: 'TN',
                    zipCode: 37203
                }
            }, {
                id: 2,
                name: 'Lisa Gomez, MD',
                firstName: 'Lisa',
                lastName: 'Gomez',
                designation: 'MD',
                specialty: 'Internal Medicine',
                locationDistance: 14,
                photo: 'https://placehold.it/75x75',
                location: {
                    title: 'TriStar Centennial',
                    address: '2300 Patterson St',
                    city: 'Nashville',
                    state: 'TN',
                    zipCode: 37203
                }
            }, {
                id: 3,
                name: 'Raymond Acevedo, MD',
                firstName: 'Raymond',
                lastName: 'Acevedo',
                designation: 'MD',
                specialty: 'Internal Medicine',
                locationDistance: 14,
                photo: 'https://placehold.it/75x75',
                location: {
                    title: 'TriStar Centennial',
                    address: '2300 Patterson St',
                    city: 'Nashville',
                    state: 'TN',
                    zipCode: 37203
                }
            }, {
                id: 4,
                name: 'Christi Mancuso, MD',
                firstName: 'Christi',
                lastName: 'Mancuso',
                designation: 'MD',
                specialty: 'Internal Medicine',
                locationDistance: 14,
                photo: 'https://placehold.it/75x75',
                location: {
                    title: 'TriStar Centennial',
                    address: '2300 Patterson St',
                    city: 'Nashville',
                    state: 'TN',
                    zipCode: 37203
                }
            }, {
                id: 5,
                name: 'Martin Mannings, MD',
                firstName: 'Martin',
                lastName: 'Mannings',
                designation: 'MD',
                specialty: 'Internal Medicine',
                locationDistance: 14,
                photo: 'https://placehold.it/75x75',
                location: {
                    title: 'TriStar Centennial',
                    address: '2300 Patterson St',
                    city: 'Nashville',
                    state: 'TN',
                    zipCode: 37203
                }
            }
        ]
    }
})

路由器/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Axios from '@/components/Axios'
import VueResource from '@/components/VueResource'
import PhysicianListing from '@/components/PhysicianListing'
import ProgressSteps from '@/components/ProgressSteps'
import PhysicianProfile from '@/components/PhysicianProfile'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Axios',
            component: Axios
        },
        {
            path: '/resource',
            name: 'VueResource',
            component: VueResource
        },
        {
            path: '/physicians',
            name: 'physician-listing',
            component: PhysicianListing
        },
        {
            path: '/physicians/profile/:firstName-:lastName-:designation',
            name: 'pd-profile',
            component: PhysicianProfile
        },
        {
            path: '/progress',
            name: 'progress-steps',
            component: ProgressSteps
        }
    ]
})

PhysicianFullListing.vue 可重用组件

<template>
    <li class="pd-item">
        <div class="pd-header d-flex align-items-start">
            <div class="pd-number">{{physician.id}}</div>
            <img :src="physician.photo" alt="" class="pd-photo rounded-circle mr-4">
            <div class="pd-info">
                <h2 class="pd-title">{{physician.name}}</h2>
                <p>{{physician.specialty}}</p>
                <p class="pd-location">
                    <span class="pd-miles">
                        <i class="material-icons">place</i> {{physician.locationDistance}} miles away
                    </span><br>
                    {{physician.location.title}}<br>
                    {{physician.location.address}},<br>
                    {{physician.location.city}}, {{physician.location.state}} {{physician.location.zipCode}}
                </p>
            </div>
        </div>
        <div class="pd-footer d-flex justify-content-between">
            <div class="pd-rating">
                <span class="material-icons star-rating">star</span>
                <span class="material-icons star-rating">star</span>
                <span class="material-icons star-rating">star</span>
                <span class="material-icons star-rating">star</span>
                <span class="material-icons star-rating">star</span>
            </div>
            <router-link v-bind:to="{name: 'pd-profile', params: {firstName: physician.firstName, lastName: physician.lastName, designation: physician.designation}}">
                View Profile
            </router-link>
        </div>
    </li>
</template>

<script>
export default {
    name: 'physician-full-listing',
    props: {
        physician: Object
    },
    data () {
        return {
            msg: 'Physicians Full Listing'
        }
    }
}
</script>

PhysicianListing.vue重用组件

<template>
    <div class="physician-listing">
        <h1 class="mt-3 mb-3 text-center">{{msg}}</h1>
        <physician-filters></physician-filters>
        <physician-search></physician-search>
        <div class="row">
            <div class="pd-list-column col-4">
                <p class="results-txt">Showing 1-5 of {{physicians.length}} results</p>
                <ul class="pd-listing list-unstyled">
                    <physician-full-listing v-for="physician in physicians" :key="physician.id" :physician="physician"></physician-full-listing>
                </ul>
                <div class="fixed-action-btn">
                    <router-link to="/progress" class="btn-floating blue">
                        <i class="material-icons">arrow_downward</i>
                    </router-link>
                </div>
            </div>
            <div class="col-8">
                <google-map name="example"></google-map>
            </div>
        </div>
    </div>
</template>

<script>

import GoogleMap from '@/components/GoogleMap'
import PhysicianFilters from '@/components/physicians/PhysicianFilters'
import PhysicianSearch from '@/components/physicians/PhysicianSearch'
import PhysicianFullListing from '@/components/physicians/PhysicianFullListing'

export default {
    name: 'physician-listing',
    components: {
        PhysicianFullListing,
        GoogleMap,
        PhysicianFilters,
        PhysicianSearch
    },
    data () {
        return {
            msg: 'Make an Appointment',
        }
    },
    computed: {
        physicians() {
            return this.$store.state.physicians
        }
    }
}
</script>

PhysicianProfile.vue

<template>
    <div class="physician-profile">
        <h1 class="mb-5">{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'pd-profile',
        data () {
            return {
                msg: 'Physician Profile'
            }
        }
    }
</script>

Answer 1

首先，通过将props: true 添加到您的路由对象，您可以将路由参数作为道具传递给您的 PhysicianProfile 组件

    {
        path: '/physicians/profile/:firstName-:lastName-:designation',
        name: 'pd-profile',
        component: PhysicianProfile,
        props: true
    },

然后你可以将这三个 props 添加到你的 PhysicianProfile 组件中，并设置一个 Vuex getter 来获取医生：

getters: {
  // ...
  getPhysicianByDetails: (state) => (firstName, lastName, designation) => {
    return state.physicians.find(phys => phys.firstName === firstName && phys.lastName === lastName && phys.designation === designation)
  }
}

查看这些以进一步阅读

https://medium.com/vue-by-example/learn-quickly-passing-params-as-props-with-vue-router-f4905735b747

https://vuex.vuejs.org/guide/getters.html

Answer 2

您可以通过 URL 传递道具，在本例中为医师 ID。然后你可以在创建的生命周期钩子中获取医生:)

为了使解释更容易一些，我将在您的路径中添加一个 ID (/physician/profile/id/firstName-lastName-designation)。您可以更改创建的钩子中的 find 方法以满足您的需要:)

// Router
  {
     path: '/physicians/profile/:id/:firstName-:lastName-:designation',
     name: 'pd-profile',
     component: PhysicianProfile,
     props: true
  },

然后您需要在 PhisicianProfile.vue 中设置 props 并获取医师：

<template>
    <div class="physician-profile">
        <h1 class="mb-5">{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'pd-profile',
        props: {
            id: {
                required: true
            },
            // rest of the props if needed
        },
        data () {
            return {
                msg: 'Physician Profile',
            }
        },

        created () {
            // Fetch the physician with based on this.id
            const physician = this.$store.state.physicians.find((physician) => { return physician.id == this.id })
            // Do something with physician (set to data and use in template)
        }
    }
</script>

有关传递道具的更多信息，请查看vue router documentation :)