与 Vuex 结合使用

Vuex 受支持，但由于其与变异的性质，使用起来比 Pinia 更冗长。如果可以，建议使用 Pinia 而不是 Vuex，您的 DX 也会得到改善。

您必须将 strict 选项设置为 false 才能将 Vuex 与 VueFire 结合使用。

您可以在组件中调用 useCollection() 和 VueFire 中的其他可组合函数以连接到您的存储

import { doc } from 'firebase/firestore'
import { toRef } from 'vue'
import { useStore } from 'vuex'
import { useDocument } from 'vuefire'

const store = useStore()
const userDataRef = doc(firestore, 'users', userId)

const user = toRef(store.state, 'user')

useDocument(userDataRef, { target: user })

在这种情况下，Firebase 订阅将在组件卸载时停止。为了在组件卸载后保持订阅活动，请在操作中使用 effectScope()

// create and export a detached effect scope next to where you create your store
export const scope = effectScope(true)

export store = createStore({
  // ...
})

然后，您必须在该效果范围内调用 useDocument()、useCollection() 和 VueFire 中的其他可组合函数，如下所示

scope.run(() => {
  useDocument(userDataRef, { target: user })
})

好处是您可以在应用程序的任何位置调用它，您不必局限于在 setup() 中执行此操作。