如何通过 id 从 vuex 获取事件并打开详细页面

Question

我正在继续这个应用程序Read data from firebase in vuex。当我想打开一个包含事件的详细信息页面时，我被卡住了。到目前为止，我可以做的是，当我第一次点击一个事件时，它会打开一个在控制台中点击错误的事件的详细信息页面，但是当我重新加载详细信息页面时，它不会重新加载数据。

这是我的 store.js

 state:{
        events:[],
    },

    mutations:{
        setEvent(state,payload){
            state.events = payload
        },

        setEventDetails(state,payload){
          state.events = payload
        },
    },

    actions:{
        addEvent(context,payload){
            firebase.database().ref('eventos/').push(payload)
                .then((event)=>{
                    context.commit('setEvent',event)
                }).catch(err =>{
                console.log(err)
            })
        },

        getEvents({commit}){
            let events = [];

            firebase.database().ref('eventos')
                .on('value',event =>{
                    event.forEach(data =>{
                        events.push({ "id": data.key, ...data.val() })

                    });

                    commit('setEvent',events)
                });
        },

        getEventDetails(context,payload){
            let event = context.getters.eventDetails(payload.id);
            context.commit('setEventDetails',event)
        }

    },
     getters:{

         eventDetails: (state) => (id) => {
             return state.events.find((event) => event.id === id);
         },

         eventList: state => {
             return state.events
         },


     }

这是我的 ReadEvents.vue，我在其中单击以在详细信息页面中打开一个事件。

<template>
    <div>
        <div v-for="(event,id) in eventList" :key="id">
            {{event}}
            <button v-on:click="openEventDetails(event.id)">Details</button>
        </div>
    </div>

</template>

<script>

    export default {
        name: "ReadEvents",

        computed:{
            eventList(){
                return  this.$store.getters.eventList;
            }
        },

        mounted() {
            this.$store.dispatch('getEvents')

        },

        methods:{
            openEventDetails(id){

                this.$router.push({
                    name: 'Detalles',
                    params:{id:id}
                })
            }
        }

这是渲染事件细节的 EventDetails.vue。

<template>
    <div>
        {{search}}
    </div>
</template>

<script>


    export default {
        props:['id'],
        name: "EventDetails",

        computed:{
            search() {
                return this.$store.getters.eventDetails(this.id)
            },
        },


        created() {
            console.log(this.search)
        },

        mounted() {
            this.$store.dispatch('getEventDetails')
        },
    }

这是我从 ReadEvents.vue 打开时的结果

如果在重新加载页面后会这样

2：

Answer 1

您在 ReadEvents.vue 中从 mounted 调用 this.$store.dispatch('getEvents')。

但您在EventDetails.vue 中不会这样做。这意味着当您直接导航到使用 EventDetails.vue 的路由时，vuex 存储不会填充事件。

一种解决方案是创建一个获取事件详细信息的操作，并从 EventDetails.vue 挂载方法调用它。