vue.js將數據傳遞回組件

Question

晚上好。 我正在使用laravel和vue.js創建一個聊天應用程序。 我為用戶列出了所有消息，但是現在我可以選擇對話了，所以只要用戶選擇其中任何一個，就會出現特定的對話消息。 我在console.log上記錄了數據，每當我單擊對話時，我都能看到我有一系列需要的消息，但是我不知道如何將它們傳遞回app.js，在哪里messages[]數組是這樣，所以我可以重新渲染該組件以列出該特定對話的所有消息。 這里的一些代碼沒有得到正確的驗證，因此請忽略它，因為現在我專注於如何傳遞數據。 謝謝！

ChatConversation.vue

export default {
    props: ['conversation'],
    methods: {
        getMessages(conversation_id) {
            this.messages = [];
            axios.get('/messages/' + conversation_id, conversation_id).then(response => {
                console.log(response.data);
                // HOW TO SEND THEM BACK???
            });
        }
    }
}

app.js

const app = new Vue({
el: '#app',
data: {
    messages: [],
    conversations: [],
},
methods: {
    addMessage(message) {
        this.messages.push(message);
        axios.post('/messages', message).then(response => {

        });
    },
    loadMessages(messages) {
        this.messages = messages;
    }
},
created() {
    axios.get('/conversations').then(response => {
        this.conversations = response.data;
    });

    axios.get('/messages').then(response => {
        this.messages = response.data;
    });

    Echo.join('chatroom')
        .listen('MessagePosted', (e) => {
            this.messages.push({
                message: e.message.message,
                user: e.user
            });

            console.log(e);
        });

}
});

Answer 1

為此，我建議使用Vuex或其他維護狀態的方法。 這個想法是，您從api接收數據，將其放置在組件之間可用的vuex存儲中，並利用反應性來通知預期的接收者數據可用。

當一個插件，如使用這一個 ，你的數據可以在瀏覽器會話之間持續存在。

一般工作流程如下所示：

axios.get('/messages/' + conversation_id, conversation_id).then(response => {
     // HOW TO SEND THEM BACK???
     this.$store.commit('setMessages', response.data)
});

然后在app.js您將使用vuex的輔助函數：

computed: {
     ...mapGetters({
          messages: 'getMessages'
     })
}

現在，計算出的消息將是反應性的，這意味着您可以在模板或其他計算出的消息中使用它，並且它們將相應地更新：

<template>
    <ul>
        <li v-for="(message, index) in messages" :key="index">
             {{ message.content }}
        </li>
    </ul>
</template>