Getters undefined when working with users collection + sign in onAuthStateChanged [Help]

[KayJay89]

Hi all,

I have been trying out this wrapper for the last 2 weeks and it has been a lot of two steps forward and one back type of thing. I eventually got it to work just like I wanted it to.

That said, now I wanted to "upgrade" my app by allowing multiple users access to it simultaneously. So I would have to add the possibility to register & access it through log in via email,.. whatever Firestore offers. Doing so seems to require an almost complete rewrite of every component logic I have written so far. After struggling now for almost half a week without getting much further I am reaching out for possible guidance on how to approach this issue.

I am using Vuetify for the UI and buttons which trigger a modal to popup to perform different actions (Customize certain options, add a trade, calculate some numbers,..) Each component influences another in a certain way. Obviously the customize one allows users to input, activate certain strategies or directions which, in turn, update the FB database's boolean for each value to true or false (isSelected). Depending on that setting they either show up or not in the other components.

Example:
In customize.vue component you select strategy1 and strategy2, this dispatches a patch to update both these object's boolean from false to true. In the Calculate.vue component these two should popup if their isSelected is set to true.

However these components buttons do not appear as result of the getters returning "undefined" because they seem to run prior to Firebase.auth().onAuthStateChanged. And once the user is logged in the computed getters don't run.

[Vue warn]: Error in render: "TypeError: this.directions is undefined"

The only thing I found to work half is by updating the data values after the promise resolves as follows in my App.vue mounted:

mounted() {
  // Be sure to initialise Firebase first!
  Firebase.auth().onAuthStateChanged(user => {
    if (user) {
      // user is logged in so openDBChannel
      this.$store
        .dispatch('userData/openDBChannel')
        .then(() => {
          this.directions = this.$store.state.userData.data.directions
          this.instruments = this.$store.state.userData.data.instruments
          this.strategies = this.$store.state.userData.data.strategies
        })
        .catch(console.error)
    }
  })
},

Then pass these as props to the different components. This allows the buttons to generate but again does not allow reactivity across different components as I need deep reactivity to object props because I need to see whether one is selected by the user or not (in another component):

strategiesArray: [{name: 'abc', isSelected: true},{name:'def', isSelected: false}]

This isn't working at all (worked flawlessly when I did not have a users collection on top but rather 4 different collections (trades, instruments, directions, strategies). It works of course after initial loading but never without refreshing the page given the lack of deep reactivity.

I hope this makes somewhat sense and somebody can nudge me into the right direction because I have tried many options in my head but without making any progress over the last 4 days or so.

I do know that the entire point of this wrapper is to have two way sync between vuex & firebase so this might not be entirely related to it but I still thought it might be a good idea to ask here.