Vuejs는 변경을 검출하여 사용자 개입 없이 페이지를 갱신합니다.

Vuejs는 변경을 검출하여 사용자 개입 없이 페이지를 갱신합니다.

가 가지고 VueJS 어플리케이션 1 페이지)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 인스턴스는 독자적인 상태를 가지고 있기 때문에, 다른 탭에 열려 있는 Web 사이트에서는 원래의 탭과 상태가 자연스럽게 공유되지 않습니다.API가 사용자를 '확인됨'으로 표시했을 때 알 수 있도록 Vue 앱이 데이터베이스의 변경 내용을 듣기를 원하는 것 같습니다.이것은 웹소켓에게 좋은 기회이다.

기본적으로 앱에는 '사용자 확인' 메시지에 대한 '청취기'가 있습니다.API가 사용자를 확인하면 메시지가 전송됩니다.이 메시지를 수신하면 리스너는 상태에서의 사용자 확인을 갱신하고 새로 고칩니다(또는 API에서 사용자를 다시 요구합니다).푸시 알림, 채팅 앱 등을 실행하는 것과 동일한 기술입니다.

설정해야 요.user.isVerified = true를 컨피규레이션컴포넌트 내 에 있습니다.mounted 삭제:

Configuration 페이지표시하다

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

"user" 개체가 Vuex 스토어에 저장되어 있는 경우 대신 스토어에 디스패치 또는 변경을 커밋합니다.

Configuration 페이지표시하다

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

store.displaces를 설정합니다.

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

해,ConformationPage.vue컴포넌트는 단순한 컴포넌트가 아닌 페이지(루트)입니다.이메일을 수신하기 전에 사용자가 단순히 그 페이지를 방문하는 것만으로 자신을 검증할 수 없는지 확인합니다.

또, 그 컴포넌트는 반드시 천천히 로드해 주세요.그렇게 하지 않으면, 유저가 Web 사이트를 열었을 때에 렌더링 되어 곧바로 검증될 가능성이 있습니다.

tldr; 이것은 웹소켓의 작업입니다.

아래 긴 답변

왜 웹소켓이 필요합니까?

그 배경에는, 유저가 정말로 E-메일을 확인했는지 아닌지를 애플리케이션이 알 필요가 있는 것이 있습니다.되려면 , 「」에 에 액세스 할 .user데이터베이스입니다.

프런트 엔드 애플리케이션의 데이터를 업데이트하려면 백엔드 서버가 필요합니다.네! 이 질문에 대답할 수 있다면, 당신은 이미 반쯤 끝난 것입니다.

수 없는 입니다.지금 질문의 예시는 다음과 같습니다.axiosHTTP 프로토콜을 사용하여 백엔드 서버에 데이터를 요청합니다.

그럼 HTTP 프로토콜은 뭐죠?

HTTP Protocol의 문제는 백엔드 서버에 대한 단방향 요구만 허용한다는 것입니다.따라서 상호 작용은 REQUEST와 RESPENSE뿐입니다.좋아요, 그래서요?괜찮지 않아?내가 할 수 있는 건setIntervalresponse원했죠?그게 내 생각이고 엄밀히 말하면 넌 할 수 있어

하지만, 그것은 나쁜 습관이고 당신은 그것에 대해 생각조차 하지 말아야 합니다.

좋아요, 그럼 언제 데이터베이스가 업데이트되는지 어떻게 알 수 있죠?

이것이 웹 소켓이 필요한 이유입니다.MDN 웹 소켓 해석

WebSocket API는 사용자의 브라우저와 서버 간에 양방향 대화식 통신 세션을 열 수 있는 고급 기술입니다.이 API를 사용하면 응답을 위해 서버를 폴링할 필요 없이 서버에 메시지를 보내고 이벤트 구동 응답을 받을 수 있습니다.

간단한 방법으로 백엔드 서버가 프런트엔드 애플리케이션과 통신할 수 있습니다.HTTP 백엔드 서버를 교체해야 합니까?아니요, WebSocket은 실제로 HTTP와 함께 만들어졌으며 HTTP Protocol의 일종의 확장인 것처럼 행동합니다.

여기서부터 일이 힘들다고 말할 수 있어요.웹 소켓에 대해 알아보고 고객의 요구를 지원하는 백엔드 서버를 만듭니다.또, 프론트 엔드 애플리케이션도 Web Socket 의 사용에 적응할 필요가 있습니다.

라이브 데이터 취득에 정말로 관심이 있고 백엔드 서버를 작성하는데 관심이 없거나 시간이 없는 경우 Firebase를 확인하십시오.무료로 즐길 수 있습니다.

그게 시작하는데 도움이 됐으면 좋겠어요.감사해요!

언급URL : https://stackoverflow.com/questions/61563875/vuejs-detect-the-change-and-update-the-page-without-users-involvement