Question

我对Vue JS很陌生。只需使用Laravel & Vue JS构建一个简单的应用程序即可进行练习。

我正在寻找某种东西，以便我的Vue组件可以加载与Vue方法相关的所有更改。

模板：

<template>
    <div v-for="user in users" :key="user.id">
        {{ user.name }}
    </div>
</template>

脚本：

export default {
    data() {
        return {
            users: {},
            form: new Form({
                name: '',
                email: '',
                password: '',
                password_confirmation: ''
            })
        }
    },

    methods: {
        createUser() {
            this.form.post('api/user')
                .then(response => {
                    // Success
                    fire.$emit('afterCreate');
                })
                .catch(error => {
                    // Error
                });
        },

        loadUsers() {
            axios.get('api/user').then(({ data }) => (this.users = data.data));
        }
    },

    created() {
        this.loadUsers();
        fire.$on('afterCreate', () => {
            this.loadUsers();
        });
    }
}

上面的代码工作正常。例如。当我添加新的user时，它会加载新的users。

但是当数据库的users表得到更新时，我想将users加载到Vue组件。如果有人从另一台计算机上插入/更新/删除user，则应该从我的计算机上看到更新。

就这样！

Answer 1

通过使用socket.io和redis广播事件，您可以简单地使用websocket来实现此目的

关注此链接：AttachedFiles

希望对您有帮助

如果修改了数据库表，实时更改Vue组件

1 个答案: