How to fix Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'status') at app.js

Question

我有以下代码，一切都按预期工作。

<template>
  <div id="login">
    <form @submit.prevent="submit">
      <p class="loading" :class="{ hideLoad: !loading }">Loading...</p>
      <label for="email">Email</label>
      <input type="text" id="email" v-model="fields.email" />
      <span v-if="errors && errors.email" class="error">{{
        errors.email[0]
      }}</span>

      <label for="password">Password</label>
      <input type="password" id="password" v-model="fields.password" />
      <span v-if="errors && errors.password" class="error">{{
        errors.password[0]
      }}</span>
      <button type="submit">Log In</button>
      <span
        >Don't have an account?
        <router-link :to="{ name: 'Register' }">Sign Up</router-link></span
      >
    </form>
  </div>
</template>


<script>
export default {
  data() {
    return {
      fields: {},
      errors: {},
      loading: false,
    };
  },
  methods: {
    submit() {
      this.loading = true;
      axios
        .post("/api/login", this.fields)
        .then((res) => {
          if (res.status == 201) {
            localStorage.setItem("authenticated", "true");
            this.$router.push({ name: "Dashboard" });
          }
        })
        .catch((error) => {
          if (error.response.status == 422) {
            this.errors = error.response.data.errors;
            this.loading = false;
          }
        });
    },
  },
};
</script>

然后我决定使用 pinia 来管理状态并想出了以下方法。

<template>
  <div id="login">
    <form @submit.prevent="loginStore.submit">
      <p class="loading" :class="{ hideLoad: !loginStore.loading }">Loading...</p>
      <label for="email">Email</label>
      <input type="text" id="email" v-model="loginStore.fields.email" />
      <span v-if="loginStore.errors && loginStore.errors.email" class="error">{{
        loginStore.errors.email[0]
      }}</span>

      <label for="password">Password</label>
      <input type="password" id="password" v-model="loginStore.fields.password" />
      <span v-if="loginStore.errors && loginStore.errors.password" class="error">{{
        loginStore.errors.password[0]
      }}</span>
      <button type="submit">Log In 2</button>
      <span
        >Don't have an account?
        <router-link :to="{ name: 'Register' }">Sign Up</router-link></span
      >
    </form>
  </div>
</template>


<script setup>
import {useLoginStore} from '../stores/login'
const loginStore = useLoginStore();
</script>

我的login.js

import { defineStore } from 'pinia'

export const useLoginStore = defineStore('login', {
    state: () => {
        return {
            fields: {},
            errors: {},
            loading: false,
        }
    },

    actions: {
        submit() {
            this.loading = true;
            axios
              .post("/api/login", this.fields)
              .then((res) => {
                if (res.status == 201) {
                  localStorage.setItem("authenticated", "true");
                  this.$router.push({ name: "Dashboard" });
                }
              })
              .catch((error) => {
                if (error.response.status == 422) {
                  this.errors = error.response.data.errors;
                  this.loading = false;
                }
              });
          },
    },

})

一切都像以前一样工作，唯一的错误是当我用正确的凭据填写表格并提交时，我得到 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'status') at app.js

我已经尽我所能，但我无法弄清楚我做错了什么。

Answer 1

进一步调试后，我意识到错误来自 this.$router实例，因为用户成功登录并且当我控制台日志时状态代码正常。

该实例仅在组件中可用https://router.vuejs.org/api/#component-injected-properties

所以，我通过在 store.js 文件中导入路由器解决了这个问题，

import router from '../router'

然后我用

推到另一条路线

router.push({ name: "Dashboard" });

而不是this.$router.push({ name: "Dashboard" });

How to fix Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'status') at app.js

How to fix Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'status') at app.js

laravel

vue.js

axios

pinia