直接调用子组件导致vuex出现空值

Calling child component directly causes null values from vuex

我正在将 VueJS 与 webpack、vuex 和 vue-router 一起使用。我尝试通过在子组件中使用计算功能来检查用户是否已注册。计算的功能尝试查看我的 vuex 中的 user-属性。这工作正常,如果我通过这个 URL http://localhost:8080 打开我的网络应用程序。仅当我通过此 URL: http://localhost:8080/meetup/id 直接调用我的子组件时才会出现问题。出现错误:TypeError: Cannot read property 'registeredMeetups' of null,因为 user-属性 此时甚至不存在。

子组件计算代码:

computed: {
    userIsRegistered() {
      console.log(this.$store.getters.getUser)
      if (this.$store.getters.getUser.registeredMeetups.findIndex(meetupId => {return meetupId === this.meetupId;}) >= 0) {
        return true;
      } else { return false; }
    }
  }

用户属性在 Vue-instance 中 main.js 中设置:

new Vue({
  router,
  store,
  vuetify,
  render: function (h) { return h(App) },
  created () {
    this.initialFirebaseConfig();
    this.isUserAuthSignIn();
    this.$store.dispatch('loadMeetups');
  },
  methods: {
    initialFirebaseConfig() {
      const firebaseConfig = {
        ...
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    },
    isUserAuthSignIn() {
        firebase.auth().onAuthStateChanged((user) => {
       
          if(user) {
            this.$store.dispatch('autoSignIn', user)
          }
        });
    }
  }

vue-router代码:

{
    path: "/meetup/:id",
    name: "Meetup",
    props: true,
    component: () => import(/* webpackChunkName: "meetup" */ '../components/Meetup/Meetup.vue')
  },

目标:来自子组件的计算功能应该 运行 在来自 main.js.

的 vue 实例的功能之后
const user = this.$store.getters.getUser   
if (user && user.registeredMeetups.findIndex(meetupId => {return meetupId === this.meetupId;}) >= 0) {
    return true;
} else { 
    return false; 
}