编写一个全局方法来检查NuxtJS中的验证

Z时代
2024-01-10
分类：问答

我很难编写一个全局方法来检查NuxtJS中的验证。我可以编写的方法v-if在组件中显示，如果它返回True。我把这段代码放在layout/default.vue中，但它不起作用。编写一个全局方法来检查NuxtJS中的验证

/layout/defaut.vue

<script> 
import '~/assets/icons' 
export default { 
    head() { 
    return !this.mobileLayout ? {} : { 
     bodyAttrs: { 
     class: 'mobile' 
     } 
    } 
    }, 
    created() { 
    this.LoggedIn() 
    }, 
    methods: { 
    LoggedIn: function() { 
     return this.$store.state.authUser 
    } 
    } 
} 
</script>

组件：

<template> 
    <div v-if="LoggedIn">Authenticated</div > 
</template>

错误：

Property or method "LoggedIn" is not defined on the instance but referenced during render

希望你小子帮我！

回答：

由于authUser是vuex中的状态属性，而不是方法。您组件中的LoggedIn只是从状态返回一个值，并不需要是一个方法。

您应该使用计算而不是方法。您也不需要从创建的方法调用LoggedIn，一旦它被计算出来，它就会自动计算。

<script> 
import '~/assets/icons' 
export default { 
    head() { 
    return !this.mobileLayout ? {} : { 
     bodyAttrs: { 
     class: 'mobile' 
     } 
    } 
    }, 
    computed: { 
    LoggedIn: function() { 
     return this.$store.state.authUser 
    } 
    } 
} 
</script>

甚至更好，使用mapState从vuex这是记录在这里https://vuex.vuejs.org/en/state.html

<script> 
import Vuex from 'vuex' 
import '~/assets/icons' 
export default { 
    head() { 
    return !this.mobileLayout ? {} : { 
     bodyAttrs: { 
     class: 'mobile' 
     } 
    } 
    }, 
    computed: { 
    ...mapState({ 
     LoggedIn: 'authUser' 
    }) 
    } 
} 
</script>