Using Vue with Pinia has been a great experience for me. Here's what my store structure looks like:
interface LoginStore {
token?: string;
}
export const useLoginStore = defineStore('login', {
state: () => ({} as LoginStore),
actions: {
async login(email: string, password: string): Promise<boolean> {
try {
const result = await api.post('/api/user/login', { email, password });
this.token = result.data.data.token;
return true;
} catch (err) {
console.error('Login Error', err);
return false;
}
},
},
getters: {
isLoggedIn: (state) => {
return state.token != null;
}
}
});
Even though the login() function successfully logs in the user, the isLoggedIn getter still returns false.
I've double-checked and I am using storeToRefs correctly to access the store (referenced issue).
const { isLoggedIn } = storeToRefs(useLoginStore());
I'm puzzled by why isLoggedIn remains false despite state.token being assigned a value. Any thoughts on this?