How can I navigate to another route from actions in Vue's Pinia store?

Question

I'm currently working in a Vue 3 project.

Using the this.$router.push({}) doesn't seem to work in the Pinia store.

I have also tried importing the useRouter --> import { useRouter } from "vue-router"; to simply use router.push, but yet nothing still seems to work.

I don't know what could be the problem or what I should use to navigate my routes from the actions in the Pinia store.

 import { defineStore } from "pinia"; import axios from "axios"; export const SignupStore = defineStore("signup", { state: () => ({ fullName: "", dob: "", email: "", password: "", passwordConfirm: "", gender: "", program: "", genderOptions: ["Male", "Female"], degreePrograms: ["Degree program", "HND program", "Masters program"], isSignupCorrect: false, }), actions: { async signup() { let dob = new Date(this.dob).toISOString().substring(0, 10); let gender = this.gender.substring(0, 1); let program = this.program; if (program == "Degree program") { program = "De"; } else if (program == "HND program") { program = "Hn"; } else { program = "Ms"; } console.log(dob); console.log(program); await axios .post("register/", { full_name: this.fullName, email: this.email, password: this.password, gender: gender, dob: dob, program: program, }) .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"); } }); }, }, });

Answer 1

The only place that you need to import vue-router is in your router file.

You can then use it anywhere in the app, by importing YOUR router file (which implrments vue-router).

So all you need to do in your store, is import your router, then call the push method, like you're doing, and it should work.

Answer 2

Another alternative is to load the router as a plugin.

In your store/index,js:

pinia.use(({ store }) => { store.router = markRaw(router) })

Then it will be accessible in your store modules like: this.router.push

Repeating the caveat that you must import YOUR router, such as from src/router (Quasar)