尝试通过 Vue Axios 加载 json

Question

我正在尝试从static名为的目录中包含一个本地 JSON 文件，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>