我在和Vuejs一起写的一个消息应用程序中使用了firestore。

**场景如下：**活跃的对话列在屏幕左侧，点击它连接到相关的集合，消息列在右侧。到目前为止一切都很棒。
**问题：**当我点击左边的每一个聊天时，它都会连接到相应的收藏。如果连接了多个，问题就会出现。当我与A发送消息并收到B的消息时，我右边消息框中的数据会变为B（因为我刚刚点击了那个聊天并订阅了收藏）。

下面是我在页面加载时列出聊天记录的函数：

mounted() {
        const me = this.getRandomNumber()

        firestore.collection('chat-groups').doc('messages').collection(`${me}`).onSnapshot(snapshot => {
            this.chatGroups = snapshot.docs.map(doc => ({
                id: doc.id,
                ...doc.data()
            }))
        })
    },

下面是我点击聊天时列出消息的函数：

async getChatDetails(e) {
            const me = this.getRandomNumber()
            const pairId = e.id
            this.activeChat.id = pairId
            this.activeChat.userName = e.name
            this.activeChat.profilePhoto = e.photo

            firestore.collection('chat-groups').doc('messages').collection(`${me}`).doc(`${pairId}`).collection('messages').orderBy('createdAt', 'desc').limit(250).onSnapshot(snapshot => {
                this.messages = snapshot.docs.map(doc => ({
                    id: doc.id,
                    ...doc.data()
                })).reverse()
            })

            this.chatIsSelected = true
        }

下面是我将this.messages变量中存储的消息打印到页面的方法：

<ChatArea :messages="messages" />

我尝试了以下操作来关闭连接，但没有结果
一个三个三个一个
我能想到的解决办法是在点击聊天时退订之前的订阅，开始新的订阅，但我无法这样做。
因此，我希望能够关闭以前的链接，无论是当我离开页面（beforeDestroy），当我点击其他聊天。