I'm currently utilizing VueX in Nuxt with Typescript. My goal is to set the initial state of my user to null. When I try setting state.authenticatedUser:null, everything works smoothly. However, when I attempt to assign an IAuthenticatedUser type to it, I encounter an issue because I initialized it as null, leading to an error in my mutation function.
How can I ensure that my authenticatedUser starts off as null?
import { getAccessorType, mutationTree, actionTree } from 'nuxt-typed-vuex';
import IAuthenticatedUser from '~/ts/interfaces/firebase/user/authenticated_user.ts';
import * as counter from './counter';
type RootState = ReturnType<typeof state>
export const state = () => ({
authenticatedUser: {} as IAuthenticatedUser, //I want this to be null
})
export const getters = {
}
export const mutations = mutationTree(state, {
setAuthenticatedUser(state, newValue: IAuthenticatedUser) {
state.authenticatedUser = newValue // If state.authenticateUser == null I cannot asign newValue becuase state.authenticateUser has a type of null
},
logOut(){
state.authenticatedUser = null; // I cannot do this since it not of type IAuthenticatedUser
}
})
export const actions = actionTree(
{ state, getters, mutations },
{
async onAuthenticationStateChangedAction({ commit, dispatch }, { authUser, claims }) {
if (!authUser) {
commit('logOut');
return
}
const { uid, email, emailVerified, displayName, photoURL } = authUser
commit('setAuthenticatedUser', {
uid,
email,
emailVerified,
displayName,
photoURL,
})
}
}
)
export const accessorType = getAccessorType({
actions,
getters,
mutations,
state,
modules: {
counter,
},
})