CODEWITHSUNDEEP
vue.jswebpackvue-router
Abdulkadir Uyanik
Abdulkadir Uyanik

Reputation: 97

Calling child component directly causes null values from vuex

I am using VueJS with webpack, vuex and vue-router. I try to check if the user is registered or not by using the computed functionality in a child component. The computed functionality trys to look at the user-property in my vuex. This works fine, if i open my webapplication by this URL http://localhost:8080. The Problem occurs only if i call my child component directly by this URL: http://localhost:8080/meetup/id. It appears an error of: TypeError: Cannot read property 'registeredMeetups' of null, because user-property doesnt even exist at this time.

Child component computed Code:

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

The user properties are set in main.js in Vue-instance:

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

The vue-router Code:

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

Goal: The computed functionality from the child component should run after the functionality of the vue-instance from main.js.

Upvotes: 0

Views: 201

Answers (1)

Lyde Su
Lyde Su

Reputation: 180

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

Upvotes: 1

Related Questions