Hello fellow members of the Stackoverflow Community,
I am currently working on a Vue.js application that involves user registration. The registration process is divided into three components: Register 1 (email, password), Register 2 (personal information), and Register 3 (preferences).
Following bezkoder's guide, I have successfully implemented an API post request when the user clicks register on the first page:
Now, my goal is to store the user data in my Vuex store instead of registering the user directly. I plan to trigger the API post request in Register 3 after collecting all the necessary user information.
However, I'm facing challenges in creating a new state in my store based on my auth.module.js Code:
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;
},
},
};
My objective now is to define a state for userdata (including email, password, and preferences) and then create an action and method to save the data collected from Register 1 and 2.
If anyone has any suggestions on how to approach this challenge or has alternative ideas for optimizing the registration process, I would greatly appreciate your insights!
Looking forward to hearing all your tips and tricks :)