如何从 Vue Pinia 商店中的操作导航到另一条路线？

Question

我目前在 Vue 3 项目中工作。

使用 this.$router.push({}) 在 Pinia 商店似乎不起作用。

我也试过导入 useRouter --> import { useRouter } from "vue-router"; 来简单地使用 router.push，但似乎仍然没有任何效果。

我不知道可能是什么问题，或者我应该使用什么来从 Pinia 商店中的操作中导航我的路线。

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

您唯一需要导入的地方 vue-router 是在您的路由器文件中。

然后您可以通过导入您的路由器文件（实现 vue-router）在应用程序的任何地方使用它。

所以您需要在您的商店中做的就是导入您的路由器，然后调用 push 方法，就像您正在做的那样，它应该可以工作。

如何从 Vue Pinia 商店中的操作导航到另一条路线？

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

javascript

vue-router

vuejs3

pinia