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

#json #vue.js #vuejs2 #nuxt.js

Вопрос:

Я пытаюсь включить локальный файл 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 быстрее?

1. Я полагаю, что ваш JSON — это локальные данные, тогда вам не нужно использовать асинхронный код для извлечения данных. вы можете напрямую использовать в качестве переменной, если хотите, чтобы она загружалась быстрее.

2. Я не настолько знаком с nuxt.js (поскольку я с vue.js только) но вы можете взглянуть на документацию, особенно на промежуточное программное обеспечение здесь: nuxtjs.org/guide/routing#middleware

3. Как бы мне это реализовать?

4. Насколько велик ваш файл blogs.json?

Ответ №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>