• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

vue.js 来源:Feed Git 6次浏览

我很难编写一个全局方法来检查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> 

您的模板并不需要改变。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)