vue.jsgoogle-cloud-firestorevuexvuex-modulesvuexfire

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


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.


Solution

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