试图通过Vue Axios加载json

Question

我正在尝试在static目录中包含一个名为blogs.json的本地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>