Thank you for taking the time on this article; I found it very helpful. Steve's comment from October 2020 was also a great addition. There are some things I have had to tweak as well and others might find this useful.
This might be obvious, but just in case others might have missed this: in the onAuthStateChanged observer we not only have to point to an action rather than a mutation we also have to have "store.dispatch" instead of "store.commit."
Nuxt allows you to organize your store with modular files -- so auth.js, posts.js, etc. If you do this, then you need to indicate the file name with the action. In my store, I have an auth.js file, so I have this in fireAuth.js:
auth.onAuthStateChanged((user) => {
store.dispatch('auth/setUser', user)
resolve()
})
In the SET_USER mutation, I had to specify two different values for the payload to prevent the browser from crashing. Here’s what I did:
SET_USER(state, payload) {
if (payload === null) {state.user = payload}
if (payload !== null) {state.user = payload.uid}
},
If there is a user (i.e. payload !== null), you can of course grab whatever you want from payload to assign to state.user.
Thank you for taking the time on this article; I found it very helpful. Steve's comment from October 2020 was also a great addition. There are some things I have had to tweak as well and others might find this useful.
This might be obvious, but just in case others might have missed this: in the onAuthStateChanged observer we not only have to point to an action rather than a mutation we also have to have "store.dispatch" instead of "store.commit."
Nuxt allows you to organize your store with modular files -- so auth.js, posts.js, etc. If you do this, then you need to indicate the file name with the action. In my store, I have an auth.js file, so I have this in fireAuth.js:
auth.onAuthStateChanged((user) => {
store.dispatch('auth/setUser', user)
resolve()
})
In the SET_USER mutation, I had to specify two different values for the payload to prevent the browser from crashing. Here’s what I did:
SET_USER(state, payload) {
if (payload === null) {state.user = payload}
if (payload !== null) {state.user = payload.uid}
},
If there is a user (i.e. payload !== null), you can of course grab whatever you want from payload to assign to state.user.
These are great points!
This article is actually due for an update, and these will definitely be included!