javascript - 如果数据库表修改，则实时更改 Vue 组件

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();
        });
    }
}

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

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

就是这样!

Answer 1

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

点击此链接:https://adnansabanovic.com/how-to-use-laravel-with-socket-io/

希望这对你有帮助