Что правильнее использовать в nuxt при получении данных с сервера?

Question

[Analka]

Подскажите, сейчас во всю используют composition api

Как в nuxt js правильно получать данные с api

asyncData:

export default Vue.extend({
  components: {
    IconEdit,
    IconDelete,
  },
  async asyncData({ $axios, error }) {
    try {
      const query = await $axios.$get('/v1/admin/page')
      return {
        posts: query,
      }
    } catch (error) {
      return error({ statusCode: error.status })
    }
  },
  data() {
    return {
      posts: [],
    }
  },

<script lang="ts">
import {
  defineComponent,
  useFetch,
  useContext,
  ref,
} from '@nuxtjs/composition-api'

export default defineComponent({
  components: {
    IconEdit,
    IconDelete,
  },
  setup() {
    const posts = ref([])
    const query = ref([])

    const isLoading = ref(false)

    const { $axios } = useContext()

    isLoading.value = true
    useFetch(async () => {
      query.value = await $axios.$get('/v1/admin/page')
      isLoading.value = false
      posts.value = query.value.data
    })

    return { posts, isLoading }
  },
})
</script>

или setup

import {
  defineComponent,
  useFetch,
  useContext,
  ref,
} from '@nuxtjs/composition-api'

  setup() {
    const posts = ref([])
    const isLoading = ref(false)

    const { $axios } = useContext()

    isLoading.value = true
    useFetch(async () => {
      posts.value = await $axios.$get('/v1/admin/page')
      isLoading.value = false
    })

    return { posts, isLoading }
  },

Answer 1

[Стефан]

правильней для получения данных с сервера использовать fetch hook тык, и SSR у вас будет работать по человечески

Comments

[Analka]

а через setup() чкерез useFetch() ?