Javascript Vue TypeError:无法读取未定义的属性“loggedIn”

根据错误，问题在于getter没有检索到任何数据。我试图更改store的导入，因为它是由Quasar设置为默认值的，但这只会让事情变得更糟，我也尝试了数小时调试这些错误。还尝试更改存储和路由器的默认导出，但这是毫无意义的，因为它们也从Quasar内置了设置

Login.vue

<template>
  <div>
    <q-page>
      <h5>Login Page</h5>
      <q-input name="user" v-model="username" filled label="Username" />
      <q-input name="pass" v-model="password" filled label="Password" />
      <q-btn @click="login" label="Login" />
      <li v-if="!loggedIn">
        <router-link to="/register">Register</router-link>
      </li>
    </q-page>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  name: "login",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  computed: {
    loggedIn() {
      return this.$store.getters.loggedIn;
    }
  },
  methods: {
    login() {
      this.$store
        .dispatch("LOGIN", {
          username: this.username,
          password: this.password
        })
        .then(response => {
          this.$router.push("/addsub");
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style>
</style>

routes.js

// import VueRouter from 'vue-router'

// const router = new VueRouter({
const routes = [
  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/Index.vue')
      },
      {
        path: '/subjectntestlist',
        component: () => import('pages/SubTestList.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/addsub',
        component: () => import('pages/FormData.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/logout',
        component: () => import('pages/Logout.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/register',
        component: () => import('pages/Register.vue'),
        meta: {
          requiresVisitor: true
        }
      },
      {
        path: '/newtest',
        component: () => import('pages/AddTest.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/testlist',
        component: () => import('pages/TestList.vue'),
        meta: {
          requiresAuth: true
        }
      }
    ]
  }
]
// })

// Always leave this as last one
if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue')
  })
}

export default routes

---

我终于让它工作了。如果你要在Quasar工作，只需把他们为你做的东西（又称保留字）去掉就行了。我这样做解决了我的问题 而不是创建一个新的Vue组件来调用存储。此外，您根本不必删除导出默认值，因为它们实际上非常有助于更轻松地连接其他组件

export default function ({ store, ssrContext } /* { store, ssrContext } */) { <-- This was commented out before
  const router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    // Leave these as they are and change in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
      if (!store.getters.loggedIn) {
        next({
          path: '/'
          // query: { redirect: to.fullPath }
        })
      } else {
        next()
      }
    } else if (to.matched.some(record => record.meta.requiresVisitor)) {
      if (store.getters.loggedIn) {
        next({
          path: '/addsub'
          // query: { redirect: to.fullPath }
        })
      } else {
        next()
      }
    } else {
      next() // make sure to always call next()!
    }
  })

  return router
}

---

你为什么把商店放在VueRouter里？你应该把它放在一个新的Vue{el，路由器，存储，渲染}新的Vue不工作。它只是认为它和类星体的构造不兼容。好吧，我不知道类星体，但把存储放在路由器里对我来说很奇怪。嗯，我承认把它放在那里是个错误。但是，我的导航保护代码正确吗？类似于store.getters.loggedIn的if-else条件。它不是布尔值，所以我尝试了标点符号版本。但是getter没有检索任何数据。由于我可以从登录中看到传递的数据，所以存储是正确的。最终得到了它。谢谢你的帮助。我知道把商店放在路由器里给了我一个主意。是的，谢谢你的帮助。这对我来说是一个有益的发现。

// import VueRouter from 'vue-router'

// const router = new VueRouter({
const routes = [
  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/Index.vue')
      },
      {
        path: '/subjectntestlist',
        component: () => import('pages/SubTestList.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/addsub',
        component: () => import('pages/FormData.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/logout',
        component: () => import('pages/Logout.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/register',
        component: () => import('pages/Register.vue'),
        meta: {
          requiresVisitor: true
        }
      },
      {
        path: '/newtest',
        component: () => import('pages/AddTest.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/testlist',
        component: () => import('pages/TestList.vue'),
        meta: {
          requiresAuth: true
        }
      }
    ]
  }
]
// })

// Always leave this as last one
if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue')
  })
}

export default routes

export default function ({ store, ssrContext } /* { store, ssrContext } */) { <-- This was commented out before
  const router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    // Leave these as they are and change in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
      if (!store.getters.loggedIn) {
        next({
          path: '/'
          // query: { redirect: to.fullPath }
        })
      } else {
        next()
      }
    } else if (to.matched.some(record => record.meta.requiresVisitor)) {
      if (store.getters.loggedIn) {
        next({
          path: '/addsub'
          // query: { redirect: to.fullPath }
        })
      } else {
        next()
      }
    } else {
      next() // make sure to always call next()!
    }
  })

  return router
}