问题描述
我想弄清楚如何从我的 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>
解决方法
有两种可能的解决方案:
从动作中返回unsubscribe
函数并在组件中调用
- 在您的 Vuex 操作中,从
unsubscribe
返回bindAccts({ commit })
。 - 在您的组件中,对于订阅按钮
onClick
处理函数(一个新的),您调用bindAccts
并将返回的函数存储在本地data
或变量中。立> - 然后,当用户点击取消订阅时,您会调用本地存储的
unsubscribe
(如果已定义)。
或
在您的 Vuex 商店中保存 unsubscribe
- 想法是将
unsubscribe
变量保存在您现有的 Vuex 存储中作为状态变量,并使用Getters
和Mutations
来获取/设置变量(与中的其他属性相同)您当前的状态)。 - 然后,您可以添加
unsubscribe
作为另一个 Vuex 操作,并在您的组件中使用mapActions
将操作映射为方法。逻辑非常简单。