Recently, I've been diving into Vue and Vuex while working on a small app that showcases events. Users can click on event cards to view more details using the card's ID. I've moved all the code to the Vuex Store, but I'm encountering issues with rendering individual cards. The error seems to be related to accessing the ID, but when I console log props.id, I can see the correct ID displayed (e.g., 123 for the first card I clicked on).
Here's a snippet from the EventList Component: https://i.sstatic.net/lmziR.png When I click on a card, I receive the following console error: https://i.sstatic.net/I1Dhd.png Below is the code snippet for the EventDetails component:
<template>
<div class="event-card">
<h2>You are on {{ $route.params.props.id }}</h2>
<span>@{{ event.time }} on {{ event.date }}</span>
<h4>{{ event.title }}</h4>
<p>{{ event.description }}</p>
</div>
</template>
<script>
import store from "@/store";
import { computed } from "@vue/reactivity";
import { onBeforeMount, onMounted, reactive, ref, toRefs } from "vue";
import { useStore } from "vuex";
export default {
name: "EventDetails",
props: ["id", "modelValue"],
setup(props) {
const state = reactive({
events: [],
event: {},
});
const message = ref("AsapRocky");
console.log(props.id)
onMounted(() => {
store.dispatch('fetchEvent', props.id)
});
const event = computed(() => {
return store.state.event;
});
return {
event,
message,
...toRefs(state),
};
},
};
</script>
Here's a snippet from the store code:
import { createStore } from 'vuex'
import apiClient from '../services/EventService';
export default createStore({
state: {
user: 'TommyDemian',
events: [],
event: {}
},
mutations: {
SET_EVENTS(state, events){
state.events = events;
},
SET_EVENT(state, event) {
state.event = event;
}
},
actions: {
fetchEvents({ commit }){
apiClient
.getEvents()
.then((response) => {
commit("SET_EVENTS", response.data)
})
.catch((error) => {
console.log(error);
});
},
fetchEvent({ commit }, id){
apiClient.getEvent(id)
.then((response) => {
commit("SET_EVENT", response.data)
})
.catch((error) => {
console.log(error);
});
}
},
getters: {
},
modules: {
}
})