programing

Vue: 등록하기 전에 vuex 스토어에서 사용자 설정

bestcode 2022. 9. 5. 23:02
반응형

Vue: 등록하기 전에 vuex 스토어에서 사용자 설정

하이 Stackoverflow 커뮤니티,

사용자가 등록할 수 있는 Vue.js 어플리케이션이 있습니다.등록은 3개의 다른 컴포넌트로 표시됩니다.등록 1(이메일, 비밀번호), 등록 2(개인정보), 등록 3(기본설정)입니다.

bezkoder에 따르면 첫 페이지에서 api post request를 실행하였습니다.https://www.bezkoder.com/vue-3-authentication-jwt/

지금 하려고 하는 것은 사용자를 직접 등록하는 것이 아니라 사용자 데이터를 vuex 스토어에 저장하고 모든 사용자 정보를 가지고 있는 Register 1이 아닌 Register 3에 API 포스트 요청을 보내는 것입니다.

유감스럽게도, 저는 제 스토어에 새로운 상태를 만들 수 없습니다.이것은 my auth.module.js 코드(스토어):

import AuthService from "../services/auth.service";
const user = JSON.parse(localStorage.getItem("user"));

const initialState = user
  ? { status: { loggedIn: true }, user }
  : { status: { loggedIn: false }, user: null };

export const auth = {
  namespaced: true,
  state: initialState,

  actions: {
    login({ commit }, user) {
      return AuthService.login(user).then(
        (user) => {
          commit("loginSuccess", user);
          return Promise.resolve(user);
        },
        (error) => {
          commit("loginFailure");
          return Promise.reject(error);
        }
      );
    },
    logout({ commit }) {
      AuthService.logout();
      commit("logout");
    },
    register({ commit }, user) {
      return AuthService.register(user).then(
        (response) => {
          commit("registerSuccess");
          return Promise.resolve(response.data);
        },
        (error) => {
          commit("registerFailure");
          return Promise.reject(error);
        }
      );
    },
  },
  mutations: {
    loginSuccess(state, user) {
      state.status.loggedIn = true;
      state.user = user;
    },
    loginFailure(state) {
      state.status.loggedIn = false;
      state.user = null;
    },
    logout(state) {
      state.status.loggedIn = false;
      state.user = null;
    },
    registerSuccess(state) {
      state.status.loggedIn = true;
    },
    registerFailure(state) {
      state.status.loggedIn = false;
    },
  },
};

따라서 사용자 데이터 상태(이메일, 비밀번호, 기본 설정)를 작성한 후 레지스터 1과 2에서 사용자 데이터를 저장하는 작업 및 방법을 만들어야 합니다.

제가 어떻게 이 방법을 구현할 수 있는지 아는 사람이 있나요?아니면 제 등록을 만드는 더 좋은 방법이 있나요?

힌트나 트릭을 주셔서 감사합니다:)

내가 고칠 수 있어patient.module.js라는 이름의 새 파일을 만들고 거기서 상태를 설정할 수 있습니다.내 코드는 다음과 같습니다.

export const patient = {
  namespaced: true,

  state: {
    email: null,
    password: null,
    location: [],
    specialty: [],
    attribute: [],
    language: [],
    gender: [],
  },
  actions: {
    register({ commit }, patient) {
      return new Promise((resolve) => {
        commit("setPatientData", patient);
        resolve();
      });
    },
  },
  mutations: {
    setPatientData(state, patient) {
      Object.assign(state, patient);
    },
  },
};

언급URL : https://stackoverflow.com/questions/70128562/vue-set-user-in-vuex-store-before-registration

반응형