我希望我的反应状态在Vue 2中的任何选项卡中更新时，在不同选项卡之间(未聚焦)是相同的(更新)

Question

我的模板中的代码

<!-- 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);
},
}

此方法确实会正确更新状态，但仅更新当前处于焦点中的选项卡的状态。如果我打开了多个选项卡，"聚焦"选项卡上的状态更改将不会反映在其他选项卡(当前未聚焦(中。每当状态this.onlineStatusValue在聚焦选项卡中更新时，我希望所有未聚焦选项卡的状态this.onlineStatusValue都会更新(希望所有选项卡的状态都在同一页上(。

Answer 1

可能是一个很好的状态管理候选人。您可以从任何选项卡更改和访问存储值。请查看Pinia。