Попытка загрузить JSON через Vue Axios

Question

Я пытаюсь включить локальный файл JSON из каталога static с именем blogs.json, в котором загружено множество блогов.

В настоящее время я загружаю блоги через Vue Axios, которыймодуль, который я включаю в Nuxt JS.

В настоящее время блоги загружаются из файла json совершенно нормально, однако есть заметная задержка в несколько мс перед загрузкой блогов, я пытаюсь понятьлучший способ загрузить файл json и заполнить массив blogs, указанный внутри data()

Это мой текущий код:

<script>
import PageBanner from '~/components/PageBanner';

export default {
  head: {
    title: 'Site Title: Blog',
    meta: [
      { hid: 'description', name: 'description', content: 'Site description' }
    ]
  },
  components: {
    PageBanner
  },
  data () {
    return {
      blogs: [],
      isLoading: true
    }
  },
  created () {
    this.axios.get("/articles/blogs.json").then((response) => {
      this.blogs = response.data
      this.isLoading = false
    })
  }
}
</script>

Это прекрасно работает, но какЯ изменяю это, чтобы загрузить JSON быстрее?

Answer 1

Просто импортируйте это, сделайте это, и это должно сработать, если Бог даст:

<template>
    <div>
        <!-- There should be no delay -->
        {{blogs}} 
    </div>
<template>
<script>
import PageBanner from '~/components/PageBanner';

import blogsFromJson from '~/articles/blogs.json'; // Or wherever it is found

export default {
  head: {
    title: 'Site Title: Blog',
    meta: [
      { hid: 'description', name: 'description', content: 'Site description' }
    ]
  },
  components: {
    PageBanner
  },
  data () {
    return {
      blogs: blogsFromJson, // Just set it here
      isLoading: true
    }
  },
  /* No need for this anymore
  created () {
    this.axios.get("/articles/blogs.json").then((response) => {
      this.blogs = response.data
      this.isLoading = false
    })
  }
  */
}
</script>