vue3 更新条件提供答案

【问题标题】：vue3 update conditional providevue3 更新条件提供
【发布时间】：2021-11-12 12:00:00
【问题描述】：

我有一个 vue3/firestore 应用程序。我正在尝试向 firestore 拨打 1 次电话以获取用户通知，这取决于是否有用户登录：

let { documents: notifications } = user.value && user.value.displayName ? getCollection('profiles', null, user.value.displayName, 'notifications') : ref([])
    provide('notifications', notifications)

如果用户已登录，这将正常工作。问题是，如果没有用户并且他们登录，则提供程序不会更新，您必须刷新应用才能使其正常工作。

潜在的解决方案是观察用户状态变化，然后更新提供者：

      if (!_user) return
      notifications = getCollection('profiles', null, user.value.displayName, 'notifications').documents
    })

但这不起作用。另一种解决方案是在另一个组件中进行调用/注入，该组件仅在有用户时才存在。问题是所有这些组件都是兄弟姐妹，您不能提供给兄弟姐妹？

【问题讨论】：

标签： vue.js vue-component vuejs3

【解决方案1】：

您provide 的任何数据都不会自动转换为反应数据 - 您需要do it yourself

provide 一个 ref 或 reactive 对象，用于包装从 Firebase 检索到的数据
使用authentication state observer 更新提供的数据

【讨论】：