尝试通过 Vue Axios 加载 json

Question

我正在尝试从名为 blogs.json 的 static 目录中包含一个本地 JSON 文件，其中包含大量博客。

我目前正在通过 Vue Axios 加载博客，这是我在 Nuxt JS 中包含的一个模块。

目前，从 json 文件加载博客非常好，但是在加载博客之前有明显的几毫秒延迟，我正在尝试找出一种更好的方法来加载 json 文件并填充 @ 987654324@数组列在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>