我想弄清楚如何从我的 vue3/vuex 商店中删除快照侦听器。我已经看到了其他类似问题的答案以及 Firestore 文档的许多链接,但我无法弄清楚 vuex 商店中的哪里可以调用 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>
这样做我找不到取消订阅功能。
答案 0 :(得分:2)
有两种可能的解决方案:
unsubscribe
函数并在组件中调用unsubscribe
返回 bindAccts({ commit })
。onClick
处理函数(一个新的),您调用 bindAccts
并将返回的函数存储在本地 data
或变量中。立>
unsubscribe
(如果已定义)。或
unsubscribe
unsubscribe
变量保存在您现有的 Vuex 存储中作为状态变量,并使用 Getters
和 Mutations
来获取/设置变量(与中的其他属性相同)您当前的状态)。unsubscribe
作为另一个 Vuex 操作,并在您的组件中使用 mapActions
将操作映射为方法。逻辑非常简单。