Why is my IF function not getting recognized?

Question

I'm working in a Vue 3 project.

I've created a store specifically for my signup component with Pinia. Inside the store's action, I've written a function that makes a post request to the backend and is expected to navigate to the following page in case the result status gotten from the response is "201".

But my problem now is that it doesn't get into my "if function" whereas I have done a log of the result status just before the "if function" which prints out "201" quite alright and hence it's normally suppose to execute the router.push statement written in my "if" function.

I've tried logging within the if and it prints out in the console. But then the router.push statement doesn't get executed I don't know why. I've done a simple button that calls a function in the store that simply routes using the same router.push and it works fine. So what could really be going on?

What could possibly be the problem I'm making if I may ask? Below are the code segments.

<<SignupStore.js>>

 import { defineStore } from "pinia"; import axios from "axios"; export const SignupStore = defineStore("signup", { state: () => ({ fullName: "", dob: "", email: "", password: "", confirmPassword: "", gender: "", program: "", genderOptions: ["Male", "Female"], degreePrograms: ["Degree program", "HND program", "Masters program"], isSignupCorrect: false, }), actions: { async signup() { let dobx = new Date(this.dob).toISOString().substring(0, 10); let genderx = this.gender.substring(0, 1); let programx = this.program; if (programx == "Degree program") { programx = "De"; } else if (programx == "HND program") { programx = "Hn"; } else { programx = "Ms"; } await axios.post("register/", { full_name: this.fullName, email: this.email, password: this.password, gender: genderx, dob: dobx, program: programx, }).then((response) => { console.log('response status is ' + response.status) if (response.status == 201) { router.push({ name: "AdmissionDashboard" }); } }).catch((error) => { if (error.response) { console.log("signup error traced"); } }); }, }, });

<>

 <script setup> import NavBar from "../components/NavBar.vue"; import { ref } from "@vue/reactivity"; import axios from "axios"; import { SignupStore } from "../Stores/SignupStore"; const user = SignupStore()

<>

 <va-button:disabled="isDisabled" class="submit-btn" color="#03c460" size="large" @click="user.signup" >Create account</va-button >

<<routes.js>>

 import { createRouter, createWebHistory } from "vue-router"; import SignupPage from '../Views/SignupPage.vue' import LandingPage from '../Views/LandingPage.vue' import AdmissionInfo from '../Views/AdmissionInfo.vue' import SignInPage from '../Views/SignInPage.vue' import PlatformCharges from '../Views/PlatformServiceCharge.vue' import AdmissionDashboard from '../Views/AdmissionDashboard.vue' import ApplicationPage from '../Views/ApplicationPage.vue' import Test from '../Views/test.vue' const routes = [ { path: '/signup', name: 'SignupPage', component: SignupPage }, { path: '/test', name: 'test', component: Test }, { path: '/', name: 'LandingPage', component: LandingPage }, { path: '/admission-info', name: 'AdmissionInfo', component: AdmissionInfo }, { path: '/sign-in', name: 'SignInPage', component: SignInPage }, { path: '/platform-charges', name: 'PlatformCharges', component: PlatformCharges }, { path: '/admission-dashboard', name: 'AdmissionDashboard', component: AdmissionDashboard }, { path: '/app-page', name: 'ApplicationPage', component: ApplicationPage }, ] const router = createRouter({ history: createWebHistory(), routes }) export default router

Answer 1

As far as I can see you don't have any reference to "router" in signup(). You need to import router inside your store file.

import { defineStore } from "pinia";
import axios from "axios";
import router from "yourRouterPath";