0

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

vue

<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>

store

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;
            }
        },
    },
});

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

1 件の回答 1

0

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

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

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。