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");
          }
        });
    },
  },
});

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");
          }
        });
    },
  },
});

• javascript
• vue-router
• vuejs3
• pinia

• You need to import YOUR router, rather than the Vue instance. For example, import router from '@/router'; where ./src/router.js implements Vue's router. – Alicia Sykes Commented Apr 15, 2022 at 12:22

2 Answers 2

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.

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)