vuejs2 - Vuejs 检测更改并更新页面而无需用户参与

Question

我有 VueJS单页应用程序( SPA )，当用户在我的应用程序中成功注册时，它会将他们重定向到主页。此主页显示一个栏(警报)，要求用户确认他们在注册期间提供的电子邮件。 备注 : 这个吧我们会一直显示，直到他们确认为止!

目前，当用户确认电子邮件时，它会在新选项卡中打开确认页面，上面写着 Email have been successfully confirmed!并且栏消失了，但是当用户转到原始选项卡(主页)时，栏仍然显示。

有什么方法可以在后台监听用户状态的变化( user.isVerified )并在没有用户参与的情况下隐藏栏(刷新页面/单击任何链接)？

为了获取用户的数据，我使用了 API 调用:

getUser({ commit }) {
        return new Promise((resolve, reject) => {
            axios
                .get('http://localhost:8000/api/user')
                .then(response => {
                    commit('setData', response.data.data);
                    resolve(response);
                })
                .catch(errors => {
                    reject(errors.response);
                })
        })
    }

JSON 响应:

{
    "data": {
        "id": 2,
        "name": "John Doe",
        "email": "john@email.com",
        "isVerified": true,
        "createdAt": "2020-04-17T13:17:07.000000Z",
        "updatedAt": "2020-04-26T23:15:24.000000Z"
    }
}

Vue页面:

<template>
    <v-content>
        <v-alert
                v-if="user.isVerified === false"
                tile
                dense
                color="warning"
                dark
                border="left"
        >
            <div class="text-center">
                <span>
                    Hey {{ user.name }}! We need you to confirm your email address.
                </span>
            </div>
        </v-alert>

        <v-content>
            <router-view></router-view>
        </v-content>
    </v-content>
</template>

Answer 1

需要明确的是，当您说“监听状态”时 - 每个 Vue 实例都有自己的状态，因此您在另一个选项卡中打开的网站自然不会与原始选项卡共享状态。听起来您希望 Vue 应用程序监听数据库中的更改，以便您知道 API 何时将您的用户标记为“已确认”。这是Websockets的绝佳机会.

本质上，您的应用程序有一个“监听器”，用于接收“用户确认”消息。当您的 API 确认用户时，它会发送消息。当监听器收到该消息时，它会更新状态中的用户确认并刷新(或者，更好地，从 API 重新请求用户)。这与支持推送通知、聊天应用程序等的技术相同。