Vuex에서 회원가입 하면 로그인 컴포넌트 불러오는 방법.

 async registUser() {
      if (
        (this.user_id === "" ||
          this.user_pass === "" ||
          this.user_name === "" ||
          this.user_age === "" ||
          this.user_phone_number === "",
        this.user_athletic_career === "")
      ) {
        alert("모든 내용을 입력해주세요");
      } else {
        const user = {
          user_id: this.user_id,
          user_pass: this.user_pass,
          user_name: this.user_name,
          user_age: this.user_age,
          user_phone_number: this.user_phone_number,
          user_athletic_career: this.user_athletic_career,
          user_profile_img: this.user_profile_img,
        };
        await this.$store.dispatch("registUser", user);
      }
    },

회원가입.vue에서 만들어놓은 로직이다.

 

모든 내용이 입력됐으면 user객체를 생성해서 vuex의 actions로 registUser 요청을 보낸다.(user 객체를 담아서)

 

async registUser({ commit }, user) {
      console.log(user);
      await axios({
        url: "http://localhost:9999/user/signup",
        method: "POST",
        params: user,
      })
        .then(() => {
          alert(`가입에 성공하셨습니다. 
                로그인을 부탁드립니다.`);
          commit("CREATE_USER", user);
        })
        .catch((err) => {
          console.log(err);
          alert("가입에 실패하셨습니다.");
        });
    },

그러면 actions에서 얘가 받게 되는데 내가 의도했던 방법은 회원가입이 성공하면 로그인 창을 불러오는 방법이었다.

 

기존 .vue에서는 this.$router.push({name:"컴포넌트 이름"}) 이 코드를 사용해서 컴포넌트를 불렀지만

vuex에서는 이 코드를 사용하니 push를 찾을 수 없다는 에러가 발생했다.

 

문제를 해결하기 위해서 vuex 맨 위에 

import router from "@/router";

router를 import 진행해주고

async registUser({ commit }, user) {
      console.log(user);
      await axios({
        url: "http://localhost:9999/user/signup",
        method: "POST",
        params: user,
      })
        .then(() => {
          alert(`가입에 성공하셨습니다. 
                로그인을 부탁드립니다.`);
          commit("CREATE_USER", user);
          router.push({ name: 'Login' });
        })
        .catch((err) => {
          console.log(err);
          alert("가입에 실패하셨습니다.");
        });
    },

 위 코드처럼 router.push로 바로 접근해서 사용하면 정상적으로 처리가 된다.