Ошибка Vue3 + Vuex
Возникает следующая ошибка:
"TypeError: Cannot read property 'results' of undefined"
Вот мой код компонента
<template>
<div class="container-videos row">
<card-video
v-for="video in videos.results"
v-bind:key="video.id"
v-bind:video_url="{name: 'Video', params: {video_id: video.id}}"
v-bind:video_name="video.name"
v-bind:video_key="video.key"
/>
</div>
</template>
<script>
import { mapGetters, useStore } from 'vuex';
import CardVideo from '../../components/card-video/index.vue';
export default {
name: 'Videos',
metaInfo: {
},
components: {
CardVideo
},
computed: {
...mapGetters({
videos: 'videos',
})
},
serverPrefetch () {
return this.getVideosByCategory(this.$router.history.current.params.category_id);
},
mounted () {
if (!this.videos.length) {
this.getVideosByCategory(this.$router.history.current.params.category_id);
}
},
methods: {
getVideosByCategory (category_id) {
return this.$store.dispatch('getVideosByCategory', category_id);
}
}
};
</script>
actions.js
export const getVideosByCategory = ({ commit }, category_id) =>
api.getVideosByCategory(category_id)
.then(response => commit('setVideos', response.data));
getters.js
export const videos = state => state.videos;
mutations.js
export const setVideos = (state, videos) => {
state.videos = videos;
};
Кто сталкивался с такой проблемой подскажите что я делаю не так?
Я полагаю мне как то нужно определить videos, но я не совсем понимаю как это сделать в моей ситуации.