Vue：在注册前在 vuex store 中设置用户

Question

嗨，Whosebug 社区，

我有一个 Vue.js 应用程序，用户可以在其中注册。注册显示在三个不同的组件中。注册 1（电子邮件、密码）、注册 2（个人信息）和注册 3（首选项）。

我根据 bezkoder 在第一页上用户按下注册后实现了一个 api post 请求：https://www.bezkoder.com/vue-3-authentication-jwt/

我现在要做的不是直接注册用户，而是想将用户数据保存在我的 vuex 存储中，然后在寄存器 3 中发送 api post 请求，而不是注册1，当我有所有的用户信息。

很遗憾，我无法在我的商店中创建新状态。这是我的 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 中保存我的用户数据。

有人知道我该如何实现吗？或者您对如何创建我的注册有更好的想法？

很高兴你提供了所有提示和技巧:)

Answer 1

我可以修复它。我创建了一个名为“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);
    },
  },
};

Vue：在注册前在 vuex store 中设置用户

Vue: Set user in vuex store before registration

javascript

state

vue.js

vuex