我有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>
需要明确的是，当你说"监听状态"时，每个Vue实例都有自己的状态，所以你在另一个选项卡中打开的网站自然不会与原始选项卡共享状态。听起来你想让Vue应用程序监听数据库中的更改，这样你就可以知道API何时将用户标记为"已确认"。这对Websockets来说是一个很好的机会。
本质上，你的应用程序有一个"用户确认"消息的"监听器"。当API确认用户时，它会发送消息。当侦听器接收到该消息时，它会更新用户确认状态并刷新(或者更好地，从API重新请求用户(。这与推动推送通知、聊天应用程序等的技术相同。
您必须在构象组件中的某个位置设置user.isVerified = true，例如在mounted挂钩中：
确认Page.vue
mounted () {
this.user.isVerified = true
},
如果"用户"对象存储在Vuex存储中，则将更改分派或提交到存储中：
确认Page.vue
mounted () {
this.$store.commit('userIsVerified', true)
}
store.js
mutations: {
userIsVerified (state, value) {
state.user.isVerified = value
}
}
请记住，如果ConformationPage.vue组件是一个页面(路由(，而不仅仅是一个组件，请确保用户在收到电子邮件之前不能仅仅通过访问该页面来验证自己。
还要确保你懒惰地加载该组件，否则它可能会在用户打开网站时呈现，这将立即验证它们。
tldr；这是Websockets的作业。
低于的长答案
为什么需要Websockets
它背后的想法是，你的应用程序需要知道用户是否真的确认了他的电子邮件。为了成功确认，它必须访问连接到user数据库的后端服务器。
所以现在，你需要你的后端服务器来更新前端应用程序中的数据，对吗？是的！如果你能回答这个问题，你已经完成了一半。
然而，这是前端应用程序无法做到的。对于现在问题中的示例，您使用了axios，它使用HTTP协议向后端服务器请求数据。
那么HTTP协议是怎么回事呢
HTTP协议的问题在于，它只允许向后端服务器请求一种方式。所以你的互动只是请求和回应。好吧，那又怎样？这不是很好吗？我可以做一些setInterval，直到我得到我想要的response，对吗？嗯，这是我的想法，从技术上讲你可以
然而，这是一种糟糕的做法，你甚至不应该去想它。
好的，我怎么知道数据库什么时候更新
这就是Websocket的用武之地。Websocket 的MDN解释
WebSocket API是一种先进的技术，它使能够在用户的浏览器和服务器之间打开双向交互式通信会话使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需轮询服务器以获得回复。
通过一种简单的方式，它允许后端服务器与前端应用程序对话。我需要更换我的HTTP后端服务器吗？不，WebSocket实际上是与HTTP结合在一起的，就像它是HTTP协议的某种扩展一样。
现在我想说，这就是工作的艰难之处。了解websocket，并创建一个支持您需求的后端服务器。此外，您的前端应用程序也必须适应使用WebSocket。
如果你真的对获取一些实时数据感兴趣，但对创建后端服务器不感兴趣(或没有时间(，你应该看看Firebase。它是免费的，你可以玩得很开心。
我希望这能帮助你开始。非常感谢。