Nuxt.js+axios - 정적 JSON 파일에서 API 응답을 시뮬레이션하는 예

4056 단어 Vue.jsnuxt
모형용 라이브러리 등 json 파일을 쉽게 사용하지 않으려는 경우
static/users.json
[
  {
    "id" : 1,
    "name": "Alice"
  },
  {
    "id" : 2,
    "name": "Bob"
  },
  {
    "id" : 3,
    "name": "Carol"
  }
]

pages/axios-assets-json.vue
<template>
  <div>
    <h1>
      assset API
    </h1>
    <h2>Users</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.id }} - {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData({ $axios }) {
    const users = await $axios.$get('/users.json')
    // OR
    // const users = await $axios.$get('http://localhost:3000/axios-assets-json')
    return { users }
  }
}
</script>


Original by Github issue

좋은 웹페이지 즐겨찾기