I received the response of vue3api in the store, but when I return it to the front, it becomes undefined.

Problem with api side receiving response but not returning it to vue well

vue

<template>
  <div class="register-wrap">
    <h1class="title">Membership </h1>
    <[email protected] event="register">
      <div class="input-wrap">
        <p class="input-title">mail address</p>
        <input:value="data.email" name="email" class="input" type="email" disabled>
        <span class="warning">*You cannot change your email address.</span>
      </div>
      <div class="input-wrap">
        <p class="input-title">Nickname</p>
        <input v-model="data.name" class="input" type="text">
      </div>
      <div class="input-wrap">
        <p class="input-title">Password</p>
        <input v-model="data.password" class="input" type="text">
      </div>
      <button class="btn btn-register" type="submit">
        register
      </button>
    </form>
  </div>
</template>

<script lang="ts" setup>
import {useRoute} from "vue-router";
import {useAuthStore} from "../../store/auth";

const route = useRoute();
const authStore=useAuthStore();

const data = {
  name: '' ,
  email:route.query.email,
  password:'
}

const register=async()=>{
  constres = wait authStore.register(data);
  console.log(res);
}
</script>

store

import {defineStore} from "pinia";
import axios from "axios";

export const useAuthStore=defineStore("auth", {
    state:() = > {
        return {};
    },
    getters: {},
    actions: {
        async register (params) {
            try{
                wait axios.post("/api/register/social", params).then(res)=>{
                    const {data} = res;
                    console.log(data);
                    return data;
                });
            } catch(e){
                return;
            }
        },
    },
});

You can see the data in the console.log in the store, but the console.log on the vue side is undefined.
In addition, the error return; appears on the vue side, so I believe the problem is within then(), but it is not resolved.
I would like to put a return value in console.log(res); on the vue side.Please let me know if you have any knowledge.

javascript api vuejs

2022-10-31 00:00

1 Answers

In authStore.register(), axios.post has been waited but has not been returned, so the return type of this method is Promise<undefined>.

The desired behavior (returns a response to the caller) is

return wait axios.post("/api/register/social", params).then(res)=>{
                    const {data} = res;
                    console.log(data);
                    return data;
                });

You must return this as shown in .

2022-10-31 00:00

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656