NuxtJSの認証を確認するためのグローバルメソッドを書く

Question

NuxtJSの認証を確認するグローバルメソッドを書くのが難しいです。 Trueを返す場合、表示するコンポーネントにv-ifを書くことができるメソッド。 このコードをlayout/default.vueに入れますが、動作しません。

/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 

あなたは男私を助け願っています！

Answer 1

authUserはvuexの状態プロパティであるため、メソッドではありません。コンポーネント内のLoggedInは単に状態から値を返すため、メソッドである必要はありません。

メソッドの代わりに計算を使用する必要があります。また、作成したメソッドからLoggedInを呼び出す必要はありません。一度計算されると、自動的に計算されます。ここで説明されてvuexから

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

あるいはさらに良い、使いmapStateは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> 

あなたのテンプレートを変更する必要はありません。