如何从 Vuex 商店中删除 Firestore 快照侦听器

Posted

技术标签:

【中文标题】如何从 Vuex 商店中删除 Firestore 快照侦听器【英文标题】:How do I remove a Firestore snapshot listener from a Vuex store 【发布时间】:2021-04-09 06:14:00 【问题描述】:

我试图弄清楚如何从我的 vue3/vuex 存储中删除快照侦听器。我已经看到了其他类似问题的答案以及 Firestore 文档的许多链接,但我无法弄清楚 vuex 商店中的 WHERE 是否可以调用 unsubscribe()。有人可以帮助了解在使用 vuex 时在哪里以及如何调用 unsubscribe() 函数吗?

我有一个组件正在调用 store 中的 bindAccts(),然后它会运行提交/变异并填充我的“帐户状态”。这是我的 vuex 存储文件中的代码:

import  createStore  from 'vuex'
import  db  from '../main'

export default createStore(
  state() 
    return  categories: [], accounts: [], transactions: [], count: 1 
  ,
  mutations: 
    SET_ACCTS(state, data) 
      state.accounts = data
    ,

  ,
  actions: 
    bindAccts( commit ) 
      this.unsubscribe = db
        .collection('accounts')
        .onSnapshot(function(querySnapshot) 
          let accounts = []
          querySnapshot.forEach(function(doc) 
            accounts.push(doc.data())
          )
          commit('SET_ACCTS', accounts)
        )
    ,
...

在我的测试组件中,我像这样调用 bindAccts() 并在 ui 上快速显示帐户状态:

<template>
  <button @click="bindAccts">Subscribe</button>
  <button @click="unsubscribe">Unsubscribe</button>
  <p>Accounts:  accounts </p>
</template>

<script>
import  mapActions, mapState  from 'vuex'
export default 
  components: ,

  data() 
    return 
  ,

  computed: 
    ...mapState( accounts: state => state.accounts )
  ,

  methods: 
    ...mapActions(['bindAccts', 'unsubscribe'])
  

</script>

<style></style>

这样做我找不到取消订阅功能。

【问题讨论】:

【参考方案1】:

有两种可能的解决方案:

从动作返回unsubscribe函数并调用组件

    在您的 Vuex 操作中,从 bindAccts( commit ) 返回 unsubscribe。 在您的组件中,对于订阅按钮onClick 处理函数(一个新的),您调用bindAccts 并将返回的函数存储在本地data 或变量中。 然后,当用户单击取消订阅时,如果已定义,则调用本地存储的unsubscribe

或者

unsubscribe 保存在您的 Vuex 商店中

    我们的想法是将unsubscribe 变量保存在您现有的 Vuex 存储中作为状态变量,并使用GettersMutations 获取/设置变量(与当前状态下的其他属性相同)。 然后,您可以添加unsubscribe 作为另一个Vuex 动作,并在您的组件中,使用mapActions 将动作映射为一个方法。逻辑很简单。

【讨论】:

感谢您的建议,但在尝试实施您的第一个解决方案时遇到了错误。我返回调用 bindAccts() 的结果并在我的本地数据下填充“取消订阅”。 Vue devtools 显示它被填充为“Promise”。然后我尝试通过按钮调用取消订阅并得到响应“Uncaught TypeError: $data.unsubscribe.apply is not a function。”我想我越来越接近并喜欢您建议的逻辑,但仍需要解决如何成功处理取消订阅的问题。 @Soundpeck 根据firebase.google.com/docs/firestore/query-data/… 我认为unsubscribe 不应该是Promise,而是一个函数?无论如何,如果您确定要返回 unsubscribe 并且这是一个 Promise,那么您可以尝试 async/await 语法。 另外,你可以使用 Vue 调试器或控制台打印出 $data.unsubscribe 在你的组件本地状态下的状态,以确认没有意外发生 感谢所有帮助!我确实不得不改变一些其他的事情,但这绝对让我朝着正确的方向前进。

以上是关于如何从 Vuex 商店中删除 Firestore 快照侦听器的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Firebase Firestore 数据添加到 s-s-r Nuxt Apps Vuex Store

Vue、Vuex 和 Firestore:如何在前端显示检索到的 Firestore 数据并使其具有响应性?

Firestore、vue、vuex、vuexfire:如何让 getter 真正从存储中获取数据?

如何从 Vuex 的另一家商店调用 getter?

如何在应用程序呈现时从firestore获取集合并设置为vuex状态?

Axios 拦截器 - 如何从 vuex 商店返回响应