Ошибка 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, но я не совсем понимаю как это сделать в моей ситуации.


Ответы (0 шт):