如何从 Vuex 中的不同命名空间模块访问 rootGetters？答案

【问题标题】：How do I access rootGetters from a different namespaced module in Vuex?如何从 Vuex 中的不同命名空间模块访问 rootGetters？
【发布时间】：2021-05-19 17:24:59
【问题描述】：

我有一个名为“表单”的 Vuex 模块。我有一个名为“users”的不同（也是命名空间）模块。

我正在使用 Vuexfire（这是我第一次使用，我认为这是让我绊倒的原因）。并有一个像这样工作的动作：

      const actions = {
      loadPendingHoursRequests: firestoreAction((context) => {
        context.bindFirestoreRef('pendingHoursRequests', db.collection('hours')
        .where('submittedToUID', '==', "iTd865JKWXRmhz2D2mtW7KIpL7a2"))
      }),

这按预期工作，并在 Firestore 和 Vuex 之间创建了实时连接。问题是我希望“iTd865JKWXRmhz2D2mtW7KIpL7a2”是从“用户”模块中提取的动态值。

我完全迷路了。如果我这样重构：

  loadPendingHoursRequests ({ dispatch, commit, getters, rootGetters }) {
    let uid = rootGetters['users/currentUserUID'];
    console.log(uid)
    firestoreAction((context) => {
      context.bindFirestoreRef('pendingHoursRequests', db.collection('hours').where('submittedToUID', '==', uid))
    })
  }

上面的 console.log 返回“未定义”。即使我删除了.where('submittedToUID', '==', uid)，firestoreAction 也不起作用。

提前致谢。我很想知道我在这里不明白的地方。

【问题讨论】：

console.log(rootGetters)，你看到了什么？
对于选项 1（上图）console.log(rootGetters) 返回“ReferenceError: rootGetters is not defined”，这可能是意料之中的。选项 2 返回一个对象，其中列出了我的所有 getter。
对不起，我自己的问题垃圾邮件。我想我在用异步代码搞砸了。 rootGetters['users/currentUserUID']（上图）返回未定义...但是根据 Vuex 开发工具有一个用户/当前用户 UID。身份证。
选项 2，你看到的是 getter，但不是命名空间的 getter 我猜是模块配置问题
我试图将事情简化为这一点（暂时忽略 vuexfire）。 ` loadPendingHoursRequests ({ dispatch, commit, getters, rootGetters }) { let uid = rootGetters['users/currentUser']; console.log(uid) }` 结果很有趣。第一个控制台日志返回：{__ob__: observer}. 但如果我离开页面并返回，我会得到我正在寻找的对象。

标签： vue.js google-cloud-firestore vuex vuex-modules vuexfire

【解决方案1】：

未经测试（我不使用 VuexFire）但假设 bindFirestoreRef 需要 context 对象，您也可以访问 rootGetters 作为它的属性。将两个 sn-ps 放在一起，就像这样：

const actions = {
  loadPendingHoursRequests: firestoreAction((context) => {
    const uid = context.rootGetters['users/currentUserUID'];
    context.bindFirestoreRef('pendingHoursRequests', db.collection('hours')
      .where('submittedToUID', '==', uid))
  })
}

【讨论】：

是的，我试过了，它说 uid 未定义。如果我离开页面并返回（即再次销毁并挂载），则 UID 会出现并且一切正常。不知何故，这个函数必须在“users/currentUserUID”运行之前运行。
听起来像是由于过早调用此操作而导致的竞争条件。 getter 如何/何时填充？