Question

I have difficulty to Write a Global Methods to check authentication in NuxtJS. The methods which I can write v-if in components to display if it return True. I put this code in layout/default.vue but it doesn't works.

/layout/defaut.vue

#Get random forest from pipeline 
rfModel = model.stages[1]

rfModel.toDebugString

Components:

<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>

Error:

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

Hope you guy help me!

Answer 1

由于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>

甚至更好，请使用vuex中的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>

您的模板无需更改。

Write a Global Methods to check authentication in NuxtJS

1 个答案: