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

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    events: []
  },
  mutations: {
    addEvent(state, event) {
      state.events.push(event)
    }
  },
  actions: {
    fetchEvent({ commit }, eventId) {
      // 在这里可以进行异步操作，例如通过API获取事件信息
      // 然后将获取到的事件信息提交给mutation
      const event = { id: eventId, title: 'Event Title', description: 'Event Description' }
      commit('addEvent', event)
    }
  },
  getters: {
    getEventById: (state) => (eventId) => {
      return state.events.find(event => event.id === eventId)
    }
  }
})

export default store

// EventDetail.vue
<template>
  <div>
    <h2>{{ event.title }}</h2>
    <p>{{ event.description }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getEventById']),
    event() {
      const eventId = this.$route.params.id
      return this.getEventById(eventId)
    }
  }
}
</script>

// EventList.vue
<template>
  <div>
    <ul>
      <li v-for="event in events" :key="event.id">
        <router-link :to="'/event/' + event.id">{{ event.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    events() {
      return this.$store.state.events
    }
  },
  mounted() {
    const eventId = this.$route.params.id
    this.$store.dispatch('fetchEvent', eventId)
  }
}
</script>