如何在 Vuex4 中正确使用 firebase firestore 的 onSnapshot？

Question

我尝试在我最新的 vue3.js 网络应用程序中使用 firebase firestore。我在我的应用程序中使用 vuex4 作为状态管理。我的应用程序还使用 firebase 身份验证作为登录、注销和创建新用户。

我的应用程序在登录后使用 snapShot 功能，但是出现如下错误。

Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions.

但是我已经让代码在注销事件后取消订阅 onSnapshot 功能。我的代码如下：

store/index.js

const store = createStore({
 state: {
  unsubscribe: null,
 },
 actions: {
  startListner(context) {
   context.state.unsubscribe = onSnapshot(
      //something result get proccess
   )
  },
  stopPostsListner(context) {
      context.state.unsubscribe();
    },
 }
})

我让 onSnapshot 函数作为 vuex 操作方法。然后在 index.vue.

使用这些函数

index.vue

<script setup>
import { useStore } from "vuex";
import { onMounted, onUnmounted } from "vue";
const store = useStore();

onMounted(() => {
  store.dispatch("startPostsListner");
});
onUnmounted(() => {
  store.dispatch("stopPostsListner");
});
</script>

我以为onSnapshot函数在销毁组件后取消订阅，但错误不断出现。

在 vuex4 中如何正确使用 onSnapshot？

Answer 1

发布我的评论作为答案以提高可见度。

通过更改安全规则：

allow read, write: if

从 false; 到 true; 将有助于修复错误。

如何在 Vuex4 中正确使用 firebase firestore 的 onSnapshot？

How to correctly way to use onSnapshot of firebase firestore in Vuex4?

javascript

firebase

vue.js

vuex

google-cloud-firestore