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

Question

我使用VueJS与webpack， vuex和vue路由器。我试图通过使用子组件中的计算功能来检查用户是否注册。计算的功能试图查看vuex中的用户属性。这工作正常，如果我打开我的Web应用程序通过这个URLhttp://localhost:8080。只有当我通过这个URL直接调用我的子组件时，才会出现问题：http://localhost:8080/meetup/id.它显示了一个错误：TypeError：不能读取null的属性“注册会议”，因为用户属性此时甚至不存在。

子组件计算代码：

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; }
    }
  }

用户属性在main中设置。Vue实例中的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路由器代码：

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

目标：子组件的计算功能应该在main.js.的vue实例的功能之后运行

Answer 1

const user = this.$store.getters.getUser   
if (user && user.registeredMeetups.findIndex(meetupId => {return meetupId === this.meetupId;}) >= 0) {
    return true;
} else { 
    return false; 
}