1

I have a Vuex module named 'forms'. I have a different (also namespaced) module named 'users'.

I'm using Vuexfire (for the first time, which I think is what's tripping me up). And have an action that works like this:

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

This works as expected and creates a real-time connection between Firestore and Vuex. The problem is I want "iTd865JKWXRmhz2D2mtW7KIpL7a2" to be a dynamic value drawn from the 'users' module.

I'm just completely lost. If I refactor like this:

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

The console.log above returns 'undefined'. And even if I remove the .where('submittedToUID', '==', uid), the firestoreAction doesn't work anyway.

Thanks in advance. I'd love to know what I'm not understanding here.

MapleDanish
  • 111
  • 2
  • 8
  • `console.log(rootGetters)`, what do you see? – Dan Feb 16 '21 at 21:17
  • For option 1 (above) `console.log(rootGetters)` returns "ReferenceError: rootGetters is not defined", which is probably to be expected. Option 2 returns an object with all my getters listed. – MapleDanish Feb 16 '21 at 21:49
  • Sorry to spam my own question. I think I'm messing something up with asynchronous code. `rootGetters['users/currentUserUID']` (above) returns undefined... But there is a user/currentUserUID according to Vuex dev tools. Idk. – MapleDanish Feb 16 '21 at 21:54
  • Option 2, you see getters but not the namespaced getter I guess there's a module configuration problem – Dan Feb 16 '21 at 21:57
  • I tried to simplify things down to this (ignoring vuexfire for now). ` loadPendingHoursRequests ({ dispatch, commit, getters, rootGetters }) { let uid = rootGetters['users/currentUser']; console.log(uid) }` With interesting results. First console log returns: `{__ob__: observer}.` But if I leave the page and come back I get the object I was looking for. – MapleDanish Feb 16 '21 at 22:08

1 Answers1

3

Untested (I don't use VuexFire) but assuming the bindFirestoreRef needs the context object, you can access rootGetters as a property of it as well. Putting the two snippets together ilke this:

const actions = {
  loadPendingHoursRequests: firestoreAction((context) => {
    const uid = context.rootGetters['users/currentUserUID'];
    context.bindFirestoreRef('pendingHoursRequests', db.collection('hours')
      .where('submittedToUID', '==', uid))
  })
}
Dan
  • 59,490
  • 13
  • 101
  • 110
  • Yeah I tried this and it's saying uid is undefined. If I leave the page and come back (ie destroy and mount again) then the UID shows up and everything works. Somehow this function must be running before the "users/currentUserUID" has ran. – MapleDanish Feb 16 '21 at 22:20
  • Sounds like a race condition resulting from calling this action too soon. How/when does the getter get populated? – Dan Feb 16 '21 at 22:22