programing

Vue 2의 모든 탭에서 업데이트될 때 다양한 탭 간에 반응 상태가 동일하게(업데이트되지 않음) 유지되기를 원합니다.

css3 2023. 6. 29. 20:19

Vue 2의 모든 탭에서 업데이트될 때 다양한 탭 간에 반응 상태가 동일하게(업데이트되지 않음) 유지되기를 원합니다.

내 템플릿의 코드

 <!-- Switch Button for online/offline status -->
    <div v-if="user.role=== 'accountant' || user.role=== 'supervisor'">
      <v-chip v-if="onlineStatusValue" color="green" class=" d-flex row-pointer" small dense @click="statusUpdated()">
        <v-icon x-small color="green darken-4">mdi-circle-medium</v-icon>
        <p class="white--text font-style-paragraph pl-2 pt-1">Online</p>
      </v-chip>
      <v-chip v-else color="red" class=" d-flex row-pointer" small dense @click="statusUpdated()">
        <v-icon x-small color="red darken-4">mdi-circle-medium</v-icon>
        <p class="white--text font-style-paragraph pl-2 pt-1">Offline</p>
      </v-chip>
    </div>

상태를 업데이트하는 방법

  methods: {
    /**
     * This method is used to test i.e either the user is online/offline
     * Socket integration method used in it
     **/
    statusUpdated() {
      clearTimeout(this.userStatusInterval)
      if (this.onlineStatusValue === false) {
        if(this.role === 'supervisor'){
           window.open("/supervisor-ticketpool");
          // this.$router.push("/supervisor-ticketpool")
        }
        socket.emit("userConnected", this.user._id);
        this.userStatusInterval = setTimeout(function () {
          EventBus.$emit('user-status-online');
        }, 1000);
      }
      else{
        if(this.role === 'supervisor'){
          this.$router.push("/");
        }
        socket.emit("userDisconnected", this.user._id);
      }
 /* ----> updates the online Status  */  
        this.$store.commit("auth/setOnlineStatus", !this.onlineStatusValue);
    },
}

이 방법은 상태를 올바르게 업데이트하지만 현재 포커스가 있는 Tab만 업데이트합니다.탭을 여러 개 연 경우 포커스 탭의 상태 변경은 현재 포커스가 없는 다른 탭에 반영되지 않습니다.모든 포커스가 없는 탭의 상태를 원하는 경우this.onlineStatusValue상태가 발생할 때마다 업데이트됨this.onlineStatusValue포커스된 탭에서 업데이트됩니다(모든 탭에 대해 상태가 동일한 페이지에 표시됨).

아마 국가 경영에 적합한 후보일 겁니다.모든 탭에서 저장된 값을 변경하고 액세스할 수 있습니다.피니아를 확인해 보세요.

언급URL : https://stackoverflow.com/questions/74193702/i-want-my-reactive-state-to-be-same-updated-between-various-tabs-unfocused