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);に返り値を入れたいです。知識のある方教えください。