vue怎么读取json

Vue.js 中读取 JSON 数据的几种常用方法**

在 Vue.js 开发中，读取 JSON 数据是一项非常基础且常见的操作，JSON（JavaScript Object Notation）因其轻量级、易读和易于解析的特性，成为了前后端数据交互的主流格式，本文将详细介绍在 Vue.js 项目中读取 JSON 数据的几种常用方法，包括静态 JSON 文件的读取、从 API 接口动态获取 JSON 数据,以及处理这些数据的基本流程。

读取本地静态 JSON 文件

在某些场景下，我们可能需要将一些静态数据（例如配置信息、模拟数据等）以 JSON 文件的形式存放在项目中，然后在 Vue 组件中读取这些数据。

步骤 1：在项目中放置 JSON 文件

在你的 Vue 项目（通常使用 Vue CLI 创建）中，创建一个 JSON 文件，为了管理方便，一般会将其放在 public 目录或 src/assets 目录下。

放在 public 目录：public 目录下的文件在构建后会被直接复制到项目的根目录，可以通过绝对路径直接访问。在 public 目录下创建 data.json 文件：
```
// public/data.json
{
  "name": "Vue JSON 示例",
  "version": "1.0.0",
  "author": "Vue Developer",
  "features": ["响应式", "组件化", "虚拟DOM"]
}
```
放在 src/assets 目录：src/assets 目录下的文件在构建过程中会被 webpack 处理，通常需要通过 require 或 import 引入，并且路径可能会被修改。在 src/assets 目录下创建 config.json 文件：
```
// src/assets/config/config.json
{
  "apiBaseUrl": "https://api.example.com",
  "timeout": 5000
}
```

步骤 2：在 Vue 组件中读取 JSON 文件

情况 A：JSON 文件在 public 目录

由于 public 目录下的文件可以通过根路径直接访问，我们可以使用 fetch API 或者 axios 来获取，这里推荐使用 fetch，它是浏览器内置的,无需额外安装。

<template>
  <div>
    <h1>静态 JSON 数据 (public 目录)</h1>
    <p>名称: {{ jsonData.name }}</p>
    <p>版本: {{ jsonData.version }}</p>
    <p>特性: {{ jsonData.features.join(', ') }}</p>
    <p v-if="loading">加载中...</p>
    <p v-if="error">{{ error }}</p>
  </div>
</template>
<script>
export default {
  name: 'StaticJsonReader',
  data() {
    return {
      jsonData: {},
      loading: true,
      error: null
    }
  },
  mounted() {
    // 使用 fetch 读取 public 目录下的 JSON 文件
    fetch('/data.json')
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应不正常')
        }
        return response.json()
      })
      .then(data => {
        this.jsonData = data
        this.loading = false
      })
      .catch(err => {
        this.error = '读取 JSON 失败: ' + err.message
        this.loading = false
        console.error('读取 JSON 出错:', err)
      })
  }
}
</script>

情况 B：JSON 文件在 src/assets 目录

src/assets 目录下的文件在构建时会被 webpack 处理，不能直接通过 fetch 读取，通常需要使用 require 或 import 语句在组件加载时直接引入。

<template>
  <div>
    <h1>静态 JSON 数据 (src/assets 目录)</h1>
    <p>API 基础URL: {{ configData.apiBaseUrl }}</p>
    <p>超时时间: {{ configData.timeout }}ms</p>
  </div>
</template>
<script>
// 方式一：使用 require (适用于 CommonJS 风格)
// const configData = require('@/assets/config/config.json')
// 方式二：使用 import (推荐，ES6 模块)
import configData from '@/assets/config/config.json'
export default {
  name: 'AssetJsonReader',
  data() {
    return {
      configData: configData
    }
  }
}
</script>

注意：将 JSON 文件放在 src/assets 目录并通过 import 引入时，Webpack 会在构建时将其解析为 JavaScript 对象，而不是在运行时通过网络请求获取，这种方式不适合需要动态更新的 JSON 文件。

从 API 接口动态获取 JSON 数据

在实际应用中，大多数 JSON 数据都来自后端的 API 接口，Vue 组件通常在生命周期钩子（如 mounted 或 created）中通过 HTTP 请求库（如 axios）获取这些数据。

步骤 1：安装并引入 axios (如果尚未安装)

npm install axios
# 或
yarn add axios

然后在你的组件中引入 axios，或者在全局引入（通常在 main.js 中）。

步骤 2：在组件中发送请求并处理响应

<template>
  <div>
    <h1>从 API 获取的 JSON 数据</h1>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>
      <p>用户名: {{ userData.username }}</p>
      <p>邮箱: {{ userData.email }}</p>
      <p>城市: {{ userData.address.city }}</p>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'ApiJsonReader',
  data() {
    return {
      userData: {},
      loading: false,
      error: null
    }
  },
  mounted() {
    this.fetchUserData()
  },
  methods: {
    async fetchUserData() {
      this.loading = true
      this.error = null
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users/1')
        // 假设 API 返回的数据格式符合预期
        this.userData = response.data
      } catch (err) {
        this.error = '获取用户数据失败: ' + (err.response?.data?.message || err.message)
        console.error('API 请求出错:', err)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

说明：

mounted 钩子：在组件挂载到 DOM 后执行，通常在这里发起 API 请求。
axios.get()：发送 GET 请求到指定的 URL。
async/await：用于处理异步操作,使代码更易读。
try...catch...finally：用于捕获请求过程中可能发生的错误，并确保无论成功与否都能执行 finally 块中的代码（如关闭加载状态）。
response.data：axios 请求成功后，响应数据通常包含在 response.data 属性中。

总结与最佳实践

静态数据：
- JSON 文件是静态的、不需要频繁更新的，且可能被版本控制管理，放在 src/assets 目录并通过 import 引入是较好的选择，因为它会在构建时被处理,减少运行时请求。
- JSON 文件较大，或者希望用户可以直接通过 URL 访问（虽然不常见），可以放在 public 目录，通过 fetch 或 axios 获取。
动态数据：
- 几乎所有来自后端的动态数据都应通过 API 接口获取，使用 axios 或 fetch 等库发送 HTTP 请求。
- 在 Vue 组件中，通常在 mounted 或 created 钩子中发起请求，并将获取的数据存储在组件的 data 中,供模板渲染使用。
- 务必处理加载状态（loading）和错误情况（error）,以提供良好的用户体验。
数据响应式：
- 通过 data 函数返回的对象属性，以及 axios/fetch 赋值给这些属性的数据，Vue 会自动使其成为响应式的，当数据变化时,视图会自动更新。
全局配置：
- 如果多个组件都需要调用 API，可以将 axios 进行全局配置（如设置基础 URL、拦截器等），通常在 main.js 中或单独创建一个 api 工具模块。