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

Question

我目前正在从事 Vue 3 项目。

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

我还尝试导入 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）在应用程序中的任何位置使用它。

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