且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

vue.js将数据传递回组件

更新时间:2023-11-02 11:20:40

为此,我建议使用

For this I'd recommend using Vuex or another way of maintaining state. The idea is, you receive data from the api, place it in a vuex store that is available between components, and leverage reactivity to notify the intended recipient that data is available.

此插件之类的插件一起使用时,您的数据可以在浏览器会话之间持久存在

When used with a plugin such as this one, your data can persist between browser sessions.

一般工作流程如下:

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

然后在app.js中,您将使用vuex的辅助函数:

Then in app.js you would use vuex's helper functions:

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

现在计算出的消息将是反应性的,这意味着您可以在模板或其他计算出的消息中使用它,并且消息将相应地更新:

The messages computed will now be reactive, meaning that you can use it in your template or other computeds and they will update accordingly:

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