vue 添加到现有会话存储阵列

Question

我构建了一个 API，它发送一个视频及其所有评论，在前端，视频在装载时被调用。我有一个创建评论按钮，它调用一个 createComment 路由，向视频添加评论并将其保存在数据库中。但是，新评论不会出现，因为在调用第一次获取所有视频提取后，代码会使用会话存储来保存视频，而不必在每次安装时调用 API。有什么办法可以将新评论添加到会话存储中。所有评论都存储在他们的视频中，因此视频是一个带有评论数组属性.

的对象

感谢您对此的任何帮助。

首页

<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方法，使其更新视频列表

SelectedVideo.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);
            }
        }

vue 添加到现有会话存储阵列

Vue adding to existing session storage array

javascript

api

session-storage

vue.js