vue怎么读取json

Vue.js 中读取 JSON 数据的完整指南

在 Vue.js 开发中，JSON 是一种常见的数据格式，常用于配置文件、API 响应或静态数据存储，无论是从本地文件读取，还是从远程接口获取，正确解析 JSON 都是数据处理的基础，本文将详细介绍 Vue.js 中读取 JSON 数据的多种方法，涵盖本地文件、远程接口、动态数据绑定及常见问题处理,助你高效数据读取技巧。

从本地 JSON 文件读取数据

在 Vue 项目中，若 JSON 数据作为静态资源（如配置文件、模拟数据等），可直接通过 import 方式引入，这种方式简单直接,适合开发阶段或小型项目。

项目中存放 JSON 文件

在 src 目录下创建一个 data 文件夹（或其他自定义目录），将 JSON 文件存放在此，创建 src/data/config.json如下：

{
  "appName": "Vue Demo",
  "version": "1.0.0",
  "features": ["data binding", "component system"]
}

在 Vue 组件中引入 JSON

使用 import 语法将 JSON 文件引入组件，再通过 data 或 computed 处理数据。

<template>
  <div>
    <h1>{{ appName }}</h1>
    <p>版本：{{ version }}</p>
    <ul>
      <li v-for="(feature, index) in features" :key="index">{{ feature }}</li>
    </ul>
  </div>
</template>
<script>
// 通过 import 引入 JSON 文件
import config from '@/data/config.json'
export default {
  name: 'App',
  data() {
    return {
      // 将 JSON 数据直接赋值给组件的 data
      appName: config.appName,
      version: config.version,
      features: config.features
    }
  }
}
</script>

注意事项

• 路径问题：使用 别名（需在 vue.config.js 或 vite.config.js 中配置）可避免路径层级过深，也可使用相对路径（如 ../../data/config.json）。
• 数据类型：JSON 文件会被解析为 JavaScript 对象，可直接访问属性（如 config.appName）。
• 构建工具支持：Webpack/Vite 会自动处理 import json,无需额外配置。

从远程 API 接口读取 JSON 数据

实际开发中，数据通常存储在服务器端，通过 RESTful API 以 JSON 格式返回，Vue 中可通过 axios、fetch 等工具发起 HTTP 请求，获取并解析 JSON 数据。

安装 HTTP 请求库

axios 是流行的 HTTP 客户端，支持 Promise，适合 Vue 项目，通过 npm 安装：

npm install axios

在组件中发起请求

使用 axios 发起 GET 请求，获取 JSON 数据并绑定到模板，从 JSONPlaceholder（一个免费测试 API）获取用户数据：

<template>
  <div>
    <h2>用户列表</h2>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'UserList',
  data() {
    return {
      users: [], // 存储用户数据
      loading: false, // 加载状态
      error: null // 错误信息
    }
  },
  created() {
    this.fetchUsers() // 组件创建时发起请求
  },
  methods: {
    async fetchUsers() {
      this.loading = true
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users')
        // response.data 即为 JSON 数据
        this.users = response.data
      } catch (err) {
        this.error = '获取数据失败：' + err.message
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

关键步骤解析

• 请求时机：在 created 或 mounted 钩子中发起请求,确保组件已初始化。
• 异步处理：使用 async/await 或 .then() 处理异步请求,避免阻塞。
• 数据绑定：将请求到的 JSON 数据赋值给组件的 data 属性,模板中通过插值或指令渲染。
• 错误处理：通过 try-catch 捕获请求异常（如网络错误、接口 500）,提升用户体验。

使用 fetch 原生 API

如果不想引入第三方库，也可使用浏览器内置的 fetch API：

async fetchUsers() {
  this.loading = true
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    if (!response.ok) {
      throw new Error('HTTP error! status: ' + response.status)
    }
    // 使用 .json() 解响应体（返回 Promise）
    const data = await response.json()
    this.users = data
  } catch (err) {
    this.error = '获取数据失败：' + err.message
  } finally {
    this.loading = false
  }
}

注意：fetch 返回的 Response 对象需要调用 .json() 方法才能解析 JSON 数据，且默认不处理错误 HTTP 状态码（如 404、500）,需手动判断。

动态解析 JSON 字符串

有时 JSON 数据可能以字符串形式存在（如从 localStorage 获取、用户输入或 API 返回的字符串化数据），需通过 JSON.parse() 动态解析。

示例场景：从 localStorage 读取 JSON

localStorage 只能存储字符串，若存储对象需手动序列化为 JSON 字符串,读取时再解析：

<template>
  <div>
    <h3>存储的配置</h3>
    <p v-if="config">主题：{{ config.theme }}</p>
    <p v-else>暂无配置</p>
    <button @click="saveConfig">保存配置</button>
  </div>
</template>
<script>
export default {
  name: 'LocalStorageDemo',
  data() {
    return {
      config: null // 存储解析后的 JSON 对象
    }
  },
  created() {
    this.loadConfig()
  },
  methods: {
    // 从 localStorage 读取并解析 JSON
    loadConfig() {
      const configStr = localStorage.getItem('appConfig')
      if (configStr) {
        try {
          this.config = JSON.parse(configStr) // 解析 JSON 字符串
        } catch (err) {
          console.error('JSON 解析失败：', err)
          localStorage.removeItem('appConfig') // 清除无效数据
        }
      }
    },
    // 将对象序列化为 JSON 字符串并存储
    saveConfig() {
      const newConfig = { theme: 'dark', language: 'zh-CN' }
      const configStr = JSON.stringify(newConfig) // 序列化为 JSON 字符串
      localStorage.setItem('appConfig', configStr)
      this.loadConfig() // 重新加载配置
    }
  }
}
</script>

关键点

• JSON.parse()：将 JSON 字符串解析为 JavaScript 对象，若字符串格式无效会抛出 SyntaxError，需用 try-catch 捕获。
• JSON.stringify()：将 JavaScript 对象序列化为 JSON 字符串,用于存储或传输。
• 数据校验：解析前可校验字符串是否为空或非 JSON 格式,避免异常。

进阶场景：全局 JSON 数据管理

若多个组件需要共享同一份 JSON 数据（如全局配置、用户信息），可通过 Vue 2 的 EventBus、Vuex 或 Vue 3 的 Pinia 进行状态管理。

使用 Pinia（Vue 3 推荐）

以 Vue 3 + Pinia 为例，创建全局 store 管理 JSON 数据：

// stores/config.js
import { defineStore } from 'pinia'
export const useConfigStore = defineStore('config', {
  state: () => ({
    data: null // 存储 JSON 数据
  }),
  actions: {
    async loadConfig() {
      try {
        const response = await import('@/data/config.json')
        this.data = response.default
      } catch (err) {
        console.error('加载配置失败：', err)
      }
    }
  }
})

在组件中使用：

<template>
  <div>{{ configStore.data?.appName }}</div>
</template>
<script setup>
import { useConfigStore } from '@/stores/config'
const