Javascript 如何从vuex按id获取事件并在详细信息页面中打开

我正在继续这个应用程序。当我想打开包含事件的详细信息页面时，我被卡住了。到目前为止，我所能做的是，当我第一次单击某个事件时，它会在控制台中打开该事件的详细信息页面，但当我重新加载详细信息页面时，它不会重新加载数据

这是我的商店

 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}
                })
            }
        }

{{event}}
细节
导出默认值{
名称：“ReadEvents”，
计算：{
事件列表（）{
返回此。$store.getters.eventList；
}
},
安装的（）{
此.$store.dispatch（'getEvents'））
},
方法：{
开放式详细信息（id）{
这是$router.push({
名称：'Detalles'，
参数：{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')
        },
    }

{{search}}
导出默认值{
道具：['id']，
名称：“事件详细信息”，
计算：{
搜索（）{
返回此.store.getters.eventDetails（this.id）
},
},
创建（）{
console.log（this.search）
},
安装的（）{
此.$store.dispatch（'getEventDetails'））
},
}

以下是从ReadEvents.vue打开时的结果

如果在重新加载页面之后

---

：

您正在调用此。$store.dispatch（'getEvents'）从ReadEvents.vue中的

挂载

但是在
EventDetails.vue
中不执行相同的操作。这意味着，当您直接导航到使用
EventDetails.vue
的路由时，vuex存储区不会填充事件

一种解决方案是创建一个获取事件详细信息的操作，并从ReadEvents.vue中的
EventDetails.vue
mounted方法调用它。
您正在从ReadEvents.vue中的
mounted
调用
this.$store.dispatch（'getEvents'）

但是在
EventDetails.vue
中不执行相同的操作。这意味着，当您直接导航到使用
EventDetails.vue
的路由时，vuex存储区不会填充事件

一种解决方案是创建一个获取事件详细信息的操作，并从
EventDetails.vue
mounted方法调用它。
Hi，您认为如果我使用本地存储来保存事件，我会失去使用数据库的优雅吗？这不会一直起作用。这对已经看到该事件的用户有效，但是共享链接不起作用，因为他们的本地存储中没有任何内容。正如你所说的一种解决方案…，如果你在我的屏幕截图中看到，我已经尝试过了。当我重新加载页面时，它丢失了所有内容。我，你认为如果我使用本地存储来保存事件，我会失去使用数据库的优雅吗？这不会一直都起作用。这会有用的k对于已经看到该事件的用户，但共享链接将不起作用，因为他们的本地存储中没有任何内容。正如您所说的一个解决方案…，如果您在我的屏幕截图中看到，我已经尝试过此方法。当我重新加载页面时，它会丢失所有内容