How do I access rootGetters from a different namespaced module in Vuex?

1.5k Views Asked by At

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.

1

There are 1 best solutions below

2
On BEST ANSWER

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))
  })
}