Vue 添加到現有的 session 存儲陣列

Question

我已經構建了一個 API 發送一個包含所有評論的視頻，並且在前端，該視頻在裝載時被調用。 我有一個創建評論按鈕，它調用一個 createComment 路由，該路由向視頻添加評論並將其保存在數據庫中。 但是，新評論沒有出現，因為在調用第一次獲取所有視頻后，代碼然后使用 session 存儲來保存視頻，而不必在每次安裝時調用 API。 有什么辦法可以將新評論添加到 session 存儲。 所有評論都存儲在他們的視頻中，因此視頻是一個帶有評論數組屬性的 object。

感謝您對此的任何幫助。

主頁

<template>
    <div class="home">
        <SelectedVideo v-bind:user="user" v-bind:video="videos[0]"/>
    </div>
</template>

<script>
    import axios from 'axios';
    import SelectedVideo from '../components/SelectedVideo.component';
    axios.defaults.withCredentials = true;

    export default {
        name: 'Home',
        components: {
            SelectedVideo
        },
        data() {
            return {
                videos: [],
                user: null
            }
        },
        created() {
            if (sessionStorage.homeVideos) {
                console.log('Getting from session storage...');
                this.videos = JSON.parse(sessionStorage.homeVideos);
            } else {
                console.log('Getting from API and setting res to session storage...');
                axios.get('http://localhost:8000/api/v1/videos')
                .then(res => {
                    sessionStorage.setItem('homeVideos', JSON.stringify(res.data.data.videos));
                    this.videos = JSON.parse(sessionStorage.homeVideos);
                })
                .catch(err => console.log("ERROR: " + err.response.data.message));
            }
        },
        mounted(){
            if (sessionStorage.user) {
            // this.videoId = video._id
            this.user = JSON.parse(sessionStorage.user);
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

選定的視頻組件

<template>
    <div class="selected">
        <h2 class="selected__title">{{video.title}}</h2>
        <video class="selected__video" :src=video.video controls :poster=video.thumb></video>

        <div style="width: 70%;">
            <div class="selected__details">
                <h3 class="selected__details__views">300 views</h3>

                <div class="selected__thumbs">
                    <div class="selected__like">&#128077; 47</div>
                    <div class="selected__dislike">&#128078; 3</div>
                </div>
            </div>

            <form class="selected__commentbox">
                <label for="comments" class="selected__commentbox__label">Comments</label>
                <textarea v-model="text" class="selected__commentbox__textarea" rows="4" id="comments" placeholder="Type a sweet comment..."></textarea>

                <button @click="handleSubmit" class="selected__commentBtn">add comment</button>
            </form>


            <div v-bind:key="comment._id" v-for="comment in video.comments" class="selected__comments">
                <Comment v-bind:comment="comment"/>
            </div>
        </div>
    </div>
</template>

<script>
    import Comment from './Comment.component.vue';
    import axios from 'axios';

    export default {
        name: 'SelectedVideo',
        data() {
            return {
                text: null,
                videoId: this.video._id,
                userId: this.user._id
            }
        },
        props: ["video", "user"],
        components: {
            Comment
        },
        methods: {
            handleSubmit(event) {
                event.preventDefault();
                this.createComment(this.text, this.videoId, this.userId);
                this.text = '';
            },
            async createComment(comment, video, user) {
                try{
                    const res = await axios({
                        method: 'POST',
                        url: 'http://localhost:8000/api/v1/comments/',
                        data: {
                            comment,
                            video,
                            user
                        }
                    });
                    if (res.data.status === 'success') {
                        // location.reload(true);
                        console.log(res);
                    }
                } catch(err) {
                    console.log(err.response.data.message);
                }
            }
        }
    }
</script>

Answer 1

為了實現您所描述的，我認為除了sessionStorage邏輯之外的文件中需要進行一些更改以使其正常工作。 首先，您需要添加一個方法，以便SelectedVideo.vue可以更新其父級中的視頻評論，即Homepage

主頁

<SelectedVideo v-bind:user="user" v-bind:video="videos[0]" @updateComment=updateComment/>

methods: {
 updateComment(comments) {
  this.$set(this.videos, 0, {...this.videos[0],...comments}); //update Vue video list
  sessionStorage.setItem("homeVideos", JSON.stringify(this.videos)); // update sessionStorage for future load
 }
}

其次，獲取到新評論后，需要調用父類的updateComment方法，以便更新視頻列表

選擇視頻.vue

async createComment(comment, video, user) {
            try{
                const res = await axios({
                    method: 'POST',
                    url: 'http://localhost:8000/api/v1/comments/',
                    data: {
                        comment,
                        video,
                        user
                    }
                });
                if (res.data.status === 'success') {
                    this.$emit("updateComment", res.data.data); // call parents update method
                    console.log(res);
                }
            } catch(err) {
                console.log(err.response.data.message);
            }
        }