Question

晚上好。我正在用laravel和vue.js创建一个聊天应用程序。我已经为我的用户列出了所有消息，但现在我可以选择对话，因此每当用户选择其中任何一个时，就会出现特定的对话消息。我在console.log中记录了数据，每当我点击对话时，我都会看到我有一系列需要的消息，但是我无法弄清楚如何将它们传递给应用程序.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存储中，并利用反应性通知目标收件人数据可用。

与this one等插件一起使用时，您的数据可以在浏览器会话之间保留。

一般工作流程如下：

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>

vue.js将数据传递回组件

1 个答案: