【问题标题】：Vuejs detect the change and update the page without user's involvementVuejs 无需用户参与即可检测更改并更新页面
【发布时间】：2020-05-02 17:51:18
【问题描述】：

我有 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>

【问题讨论】：

标签： vuejs2 vuex

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您必须在构象组件中的某处设置user.isVerified = true，例如在mounted 钩子里：

ConformationPage.vue

mounted () {
  this.user.isVerified = true
},

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

ConformationPage.vue

mounted () {
  this.$store.commit('userIsVerified', true)
}

store.js

mutations: {
  userIsVerified (state, value) {
    state.user.isVerified = value
  }
}

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

还要确保延迟加载该组件，否则它可能会在用户打开网站时呈现，这将立即验证它们。

【讨论】：

【解决方案3】：

tldr; 这是 Websockets 的工作。

下面是长答案

为什么需要 Websockets？

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

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

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

那么 HTTP 协议是怎么回事？

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

但是，这是一种不好的做法，您甚至不应该考虑它。

好的，那我怎么知道数据库什么时候更新呢？

这就是 Websocket 的用武之地。 Websocket的MDN解释

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

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

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

如果您真的对获取一些实时数据感兴趣并且不感兴趣（或没有时间）创建后端服务器，那么您应该查看 Firebase。它是免费的，您可以尽情享受。

我希望这可以帮助您入门。谢谢！

【讨论】：