91904


api側でresponseは受け取れているがそれをvueにうまく返せていない問題

vue

[code]

    <template>
      <div class="register-wrap">
        <h1 class="title">会員登録</h1>
        <form @submit.prevent="register">
          <div class="input-wrap">
            <p class="input-title">メールアドレス</p>
            <input :value="data.email" name="email" class="input" type="email" disabled>
            <span class="warning">※メールアドレスは変更できません。</span>
          </div>
          <div class="input-wrap">
            <p class="input-title">ニックネーム</p>
            <input v-model="data.name" class="input" type="text">
          </div>
          <div class="input-wrap">
            <p class="input-title">パスワード</p>
            <input v-model="data.password" class="input" type="text">
          </div>
          <button class="btn btn-register" type="submit">
            登録する
          </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 () => {
      const res = await authStore.register(data);
      console.log(res);
    }
    </script>
    
[/code]

store

[code]

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

storeのconsole.logではデータを見ることができるが、vue側でのconsole.logはundefinedになってしまいます。  
また、エラー時の `return e;`はvue側に表示されるため問題はthen()内にあると考えていますが、解決に至りません。  
vue側のconsole.log(res);に返り値を入れたいです。知識のある方教えください。


CC BY-SA 4.0
2022-10-30T12:07:59.670
91903
2022-10-30T12:26:13.933
55000
question
javascript api vue.js
vue3 apiのresponseをstoreで受け取ったもののfrontにreturnするとundefinedになる。


`authStore.register()`では、`axios.post`をawaitはしていますがreturnしていないため、このメソッドの返す型は`Promise<undefined>`となります。

意図する挙動（呼び出し元にレスポンスを返す）には、

[code]

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

のように、これをreturnする必要があります。


CC BY-SA 4.0
2022-10-30T12:26:13.933
91904
2022-10-30T12:26:13.933
2376
91903
answer