时间戳

首页 > 解决方案 > 如何从 Vuex 商店中删除 Firestore 快照侦听器

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

问题描述

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

我有一个组件正在调用商店中的 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>

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

标签： firebasevue.jsvuejs2vuexvuex4

解决方案

有两种可能的解决方案：

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

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

或者

保存unsubscribe在您的 Vuex 商店中

  1. 想法是将unsubscribe变量保存在现有的 Vuex 存储中作为状态变量，并使用Getters和Mutations获取/设置变量（与当前状态下的其他属性相同）。
  2. 然后，您可以将其添加unsubscribe为另一个 Vuex 操作，并在您的组件中，使用mapActions将操作映射为方法。逻辑将非常简单。

推荐阅读