[英]Vuex state doesn't change after login / logout
I want to show different button in Header component, based on user authentication我想根据用户身份验证在 Header 组件中显示不同的按钮
Header.vue Header.vue
<template>
<div class="utf_right_side">
<div class="header_widget">
<router-link :to="{name:'login'}" class="button border sign-in popup-with-zoom-anim" v-if="!isAuth"><i class="fa fa-sign-in"></i>Login</router-link>
<a class="button border sign-in popup-with-zoom-anim" v-if="isAuth" href="" @click.prevent="logout" :key="componentKey"><i class="fa fa-sign-in"></i>Logout</a>
<a href="dashboard_add_listing.html" class="button border with-icon"><i class="sl sl-icon-user"></i> Add Listing</a></div>
</div>
</template>
<script>
import {mapActions} from 'vuex'
export default {
name:"default-layout",
data(){
return {
user:this.$store.state.auth.user,
isAuth: this.$store.state.auth.authenticated,
}
},
methods:{
...mapActions({
signOut:"auth/logout"
}),
async logout() {
await axios.post('/logout').then(({data})=>{
this.signOut();
this.$parent.forceRerender();
})
},
},
}
</script>
As you can see based on the variable isAuth
which comes from the vuex state I want to show different buttons, but after logging in state doesn't change and it still show the old button (before authentication).正如您所看到的,基于来自 vuex state 的变量isAuth
我想显示不同的按钮,但在登录 state 后不会改变,它仍然显示旧按钮(在身份验证之前)。 If I refresh the page manually (f5) it shows the correct button.如果我手动刷新页面(f5),它会显示正确的按钮。
Login.vue:登录.vue:
<script>
import { mapActions } from 'vuex'
export default {
name:"login",
data(){
return {
auth:{
email:"",
password:""
},
validationErrors:{},
processing:false
}
},
methods:{
...mapActions({
signIn:'auth/login'
}),
async login(){
this.processing = true
await axios.get('/sanctum/csrf-cookie')
await axios.post('/login',this.auth).then(({data})=>{
this.signIn()
}).catch(({response})=>{
if(response.status===422){
this.validationErrors = response.data.errors
}else{
this.validationErrors = {}
alert(response.data.message)
}
}).finally(()=>{
this.processing = false
})
},
}
}
</script>
vuex auth.js which is included in index.js vuex file: vuex auth.js包含在 index.js vuex 文件中:
import axios from 'axios'
import router from '@/router'
export default {
namespaced: true,
state:{
authenticated:false,
user:{}
},
getters:{
authenticated(state){
return state.authenticated
},
user(state){
return state.user
}
},
mutations:{
SET_AUTHENTICATED (state, value) {
state.authenticated = value
},
SET_USER (state, value) {
state.user = value
}
},
actions:{
login({commit}){
return axios.get('/api/user').then(({data})=>{
commit('SET_USER',data)
commit('SET_AUTHENTICATED',true)
router.push({name:'home'})
}).catch(({response:{data}})=>{
commit('SET_USER',{})
commit('SET_AUTHENTICATED',false)
})
},
logout({commit}){
commit('SET_USER',{})
commit('SET_AUTHENTICATED',false)
}
}
}
So when user logs in it enters login method in auth.js and set the correct state, here:因此,当用户登录时,它会在 auth.js 中输入登录方法并设置正确的 state,这里:
commit('SET_USER',data)
commit('SET_AUTHENTICATED',true)|
After that it redirects to route with name home, but Header still show old button and when I refresh the page, the correct button is displayed.之后它重定向到名称为 home 的路由,但 Header 仍然显示旧按钮,当我刷新页面时,会显示正确的按钮。
Instead of store state isAuth: this.$store.state.auth.authenticated
try to import getters而不是 store state isAuth: this.$store.state.auth.authenticated
尝试导入吸气剂
import { mapGetters } from 'vuex'
and use getter in computed property, which is reactive, like:并在计算属性中使用 getter,这是反应性的,例如:
computed: {
...mapGetters({ isAuth: 'auth/authenticated' }),
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.