实际上我的项目是这样的。
- 意见
- Home.vue
- Classroom.vue
- App.vue
在Home.vue
中,我有我的内容和登录表单。基本上,如果您还没有连接,您需要提交登录(如果登录正确,则isAuth = true
)和表单隐藏,您现在可以看到内容(教室列表)
<div v-if="isAuth" @click="goToClassroomView"> List of classrooms </div>
<div v-if="!isAuth"> Here is the login form... </div>
在我的App.vue中,我有一个应用程序栏和一个路由器视图主菜单,带有我的注销功能。
<v-app-bar app color="#2196f3">
<v-btn @click="logout()">logout</logout>
</v-app-bar>
<v-main class="white">
<router-view></router-view> //Either Home.vue or Classroom.vue
</v-main>
下面是我在App.vue中的注销功能:
logout() {
this.$store.dispatch('LOGOUT')
.then(() => {
this.$router.push('/') //go to home.vue
})
}
所以我的问题来了,当我在www.example.com点击logout按钮时,用户正确地注销了,但是我的页面现在是一个空的教室列表(因为没有用户,而且isAuth
是Home.vue
内部的变量,所以我不能从App.vue
影响它)。home.app, the user logout correctly but my page is now a empty list of classrooms (because there's no user and isAuth
is a variable inside the Home.vue
so I can't affect it from the App.vue
).
那么,当我在主页或从App.vue
访问isAuth
时,是否可以重新加载页面,这样当用户在主页中注销时,教室列表会消失,并显示表单?
1条答案
按热度按时间rxztt3cl1#
你可以将
isAuth
变量更改为vuex存储状态,然后在LOGOUT
操作中将isAuth
状态更改为false
。