CODEWITHSUNDEEP
javascriptvue-routervuejs3pinia
Njita Arnaud
Njita Arnaud

Reputation: 57

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

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

Upvotes: 4

Views: 3007

Answers (2)

bajaco
bajaco

Reputation: 980

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)

Upvotes: 2

Alicia Sykes
Alicia Sykes

Reputation: 7107

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.

Upvotes: 6

Related Questions