mypage/Menu3.vue 회원탈퇴

<template>
    <div>
        <el-card class="fade-in-left">

            <h3>회원탈퇴</h3>

            <el-form>
                <br />
                <el-form-item label="암호: " label-width="120px">
                    <el-input type="password" v-model="state.pw" style="width:200px" /> <br />
                    <br />
                    <el-button @click="handleDeleteAction">회원탈퇴</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
import { reactive } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {
    setup () {

        const router = useRouter();
        const store = useStore();

        const state = reactive({
            pw   : '',
            token: sessionStorage.getItem("TOKEN")
        });

        const handleDeleteAction = async() => {
            if(confirm('정말 탈퇴하시겠습니까?')) {
                const url = `/member/delete`;
                const headers = { 
                    "Content-Type": "application/json",
                    "token": state.token
                };
                const body = {
                    password : state.pw,
                }
                const response = await axios.delete(url, { headers: headers, data: body })
                console.log(response.data);
                if(response.data.status === 200){
                    sessionStorage.removeItem("TOKEN");
                    alert('회원탈퇴 되었습니다.');
                    // 1. 주소창만 바뀜
                    router.push({name:'Home'});
                    // 2. 메뉴활성화 
                    store.commit("setMenu", "/");
                    // 3. 로그인상태
                    store.commit("setLogged", false);
                }
            }
        }
    return { state, handleDeleteAction }
  }
}
</script>

<style lang="scss" scoped>
    @import url(../../assets/mystyle.css);
</style>