直接调用子组件导致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;
}
我正在将 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;
}