Vuejs2 Vuejs检测更改并在没有用户的情况下更新页面'；参与

我已经有了

VueJS

单页应用程序（

SPA

），当用户在我的应用程序中成功注册时，它会将他们重定向到主页。此主页显示一个栏（警报），要求用户确认他们在注册期间提供的电子邮件注意：我们将不断显示此栏，直到他们确认

当前，当用户确认电子邮件时，会在一个新选项卡中打开确认页面，说明

电子邮件已成功确认

和条形图消失，但当用户转到原始选项卡（主页）时，条形图仍会显示

您是否可以在后台监听用户状态的更改（

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>

嘿{{user.name}}！我们需要您确认您的电子邮件地址。

您必须将

user.isVerified=true

设置在构象组件中的某个位置，例如安装的

挂钩中：

第页.vue
mounted（）{
this.user.isVerified=true
},

如果“用户”对象存储在Vuex存储中，则将更改分派或提交到存储：

第页.vue
mounted（）{
此.$store.commit（'userIsVerified'，true）
}

store.js
突变：{
userIsVerified（状态、值）{
state.user.isVerified=值
}
}  

请记住，如果该
页面.vue
组件是一个页面（路由）而不仅仅是一个组件，请确保用户在收到电子邮件之前不能仅仅通过访问该页面来验证自己

另外，还要确保延迟加载该组件，否则，当用户打开网站时可能会呈现该组件，这将立即验证这些组件。
要清楚，当您说“侦听状态”时，每个Vue实例都有自己的状态，因此在另一个选项卡中打开的网站不会与原始选项卡自然共享状态。听起来您希望Vue应用程序监听数据库中的更改，这样您就可以知道API何时将用户标记为“已确认”。这是一个很好的机会

本质上，你的应用程序有一个“用户确认”消息的“侦听器”。当API确认用户时，它会发送消息。当侦听器接收到该消息时，它将更新状态中的用户确认并刷新（或者更好地，从API重新请求用户）。这与推动推送通知、聊天应用程序等的技术相同。
tldr；
这是WebSocket的工作

下面的答案很长

为什么需要WebSocket？
其背后的想法是，您的应用程序需要知道用户是否真正确认了他的电子邮件。要成功确认，它必须访问连接到
用户
数据库的后端服务器

现在，您需要后端服务器来更新前端应用程序中的数据，对吗？是的！如果你能回答这个问题，你已经完成了一半

然而，这是您的前端应用程序无法做到的。对于现在问题中的示例，您使用了
axios
，它使用HTTP协议向后端服务器请求数据

那么HTTP协议是怎么回事？
HTTP协议的问题在于，它只允许您向后端服务器请求一种方式。因此，您的交互只是请求和响应。好吧，那又怎样？不是很好吗？我可以做一些
setInterval
，直到得到我想要的
响应，对吗？嗯，这是我的想法，从技术上讲，你可以

然而，这是一种糟糕的做法，你甚至不应该去想它

好的，那么我如何知道数据库何时更新？
这就是Websocket的用武之地。
MDN解释

WebSocket API是一种先进的技术，它可以在用户浏览器和服务器之间打开双向交互通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需轮询服务器以获得回复

通过一种简单的方式，它允许后端服务器与前端应用程序通信。我需要更换我的HTTP后端服务器吗？不，WebSocket实际上是与HTTP结合在一起的，就像它是HTTP协议的某种扩展

现在我要说的是，这就是工作的艰难之处。了解websocket，并创建支持您的需要的后端服务器。此外，前端应用程序还必须适应WebSocket的使用

如果您真的对获取一些实时数据感兴趣，但对创建后端服务器不感兴趣（或没有时间），那么您应该查看Firebase。它是免费的，你可以玩得很开心

我希望这能帮助你开始。谢谢大家!