[Vuejs]-Button takes 2 clicks before store update Vue and Pinia

by

0👍

Your method on_click is calling async methods like loginUser or get_user_data without waiting them to be finished.
So by the time your are logging console.log(token.value) your http request is probably not finished yet and your token is still null.

You need to await the methods that are doing those requests.

       async on_click() {
            var data = new FormData();
            data.append('email', this.email);
            data.append('password', this.password);

            const store = useUsers()
            await this.loginUser(data)
            await this.get_user_data()
            
            const { token } = storeToRefs(store)
            const { user_data } = storeToRefs(store)
            console.log(token.value)
            console.log(toRaw(user_data.value))        
        },

Keep in mind that you will probably need to display a loader to give the user a feedback because the on_click is now asynchronous and take a bit more time

Leave a comment