vue如何读写json

方法 1：通过 import 直接导入（适用于 Vue CLI/Vite 项目）

在 Vue 组件中，可直接通过 import 导入 JSON 文件，Webpack/Vite 会将其解析为 JavaScript 对象：

<template>
  <div>
    <h2>用户信息</h2>
    <p>姓名：{{ userData.name }}</p>
    <p>年龄：{{ userData.age }}</p>
    <h3>爱好</h3>
    <ul>
      <li v-for="hobby in userData.hobbies" :key="hobby">{{ hobby }}</li>
    </ul>
  </div>
</template>
<script>
// 直接导入 JSON 文件（需确保 build 工具支持，Vite/Webpack 均支持）
import data from '@/assets/data.json';
export default {
  data() {
    return {
      userData: data // 直接使用导入的对象
    };
  }
};
</script>

方法 2：通过 axios/fetch 动态加载（适用于需要动态路径的场景）

若 JSON 文件需通过动态路径加载（如用户上传的配置文件），可使用 axios 或 fetch 发起 HTTP 请求：

<template>
  <div>
    <button @click="loadJsonData">加载 JSON 数据</button>
    <div v-if="jsonData">
      <pre>{{ jsonData }}</pre>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      jsonData: null
    };
  },
  methods: {
    async loadJsonData() {
      try {
        // 假设 JSON 文件可通过 URL 访问（或通过 public 目录直接访问）
        const response = await axios.get('/assets/data.json');
        this.jsonData = response.data;
      } catch (error) {
        console.error('加载 JSON 失败:', error);
      }
    }
  }
};
</script>

读取动态 API 接口返回的 JSON 数据

实际开发中，JSON 数据多来自后端 API 接口（如 RESTful API），此时需通过 axios 或 fetch 发起异步请求，并在 Vue 组件中处理响应数据。

场景示例：获取用户列表数据

<template>
  <div>
    <h2>用户列表</h2>
    <button @click="fetchUsers">获取用户数据</button>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <p v-else>暂无数据</p>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        this.users = response.data; // API 返回的 JSON 数据自动解析为对象
      } catch (error) {
        console.error('获取用户数据失败:', error);
        this.users = []; // 出错时重置数据
      }
    }
  },
  // 可在组件创建时自动加载数据
  created() {
    this.fetchUsers();
  }
};
</script>

读取本地存储中的 JSON 数据

浏览器提供的 localStorage 和 sessionStorage 可存储 JSON 数据（需通过 JSON.stringify 序列化写入，JSON.parse 反序列化读取）。

场景示例：从 localStorage 读取用户登录状态

<template>
  <div>
    <p v-if="user">欢迎，{{ user.name }}！</p>
    <p v-else>未登录</p>
    <button @click="loadUserFromStorage">从本地存储加载用户</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: null
    };
  },
  methods: {
    loadUserFromStorage() {
      const storedUser = localStorage.getItem('user'); // 读取字符串数据
      if (storedUser) {
        this.user = JSON.parse(storedUser); // 反序列化为对象
      } else {
        this.user = null;
      }
    }
  },
  // 组件创建时尝试加载本地存储数据
  created() {
    this.loadUserFromStorage();
  }
};
</script>

写入 JSON 数据

写入 JSON 数据的核心是将 JavaScript 对象/数组序列化为 JSON 字符串，并存储到目标位置（如 API 接口、本地存储或文件），常见场景包括提交数据到后端、保存到本地存储和生成 JSON 文件下载。

将数据写入 API 接口（提交 JSON 数据）

通过 axios 或 fetch 将组件中的数据序列化为 JSON，并 POST/PUT 到后端接口。

场景示例：提交用户表单数据

<template>
  <div>
    <h2>用户注册</h2>
    <input v-model="form.name" placeholder="姓名" />
    <input v-model="form.email" type="email" placeholder="邮箱" />
    <button @click="submitForm">提交</button>
    <p v-if="message">{{ message }}</p>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      message: ''
    };
  },
  methods: {
    async submitForm() {
      try {
        // 将 form 数据序列化为 JSON，并 POST 到接口
        const response = await axios.post('https://jsonplaceholder.typicode.com/users', this.form);
        this.message = '提交成功！用户ID: ' + response.data.id;
        console.log('提交的 JSON 数据:', JSON.stringify(this.form)); // 打印序列化后的 JSON
      } catch (error) {
        this.message = '提交失败: ' + error.message;
        console.error('提交错误:', error);
      }
    }
  }
};
</script>

将数据写入本地存储（localStorage/sessionStorage）

需先将对象序列化为 JSON 字符串，再通过 setItem 存储。

场景示例：保存用户登录状态到 localStorage

<template>
  <div>
    <h2>用户登录</h2>
    <input v-model="loginForm.name" placeholder="用户名" />
    <button @click="login">登录</button>
    <button @click="logout">退出登录</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginForm: {
        name: ''
      }
    };
  },
  methods: {
    login() {
      // 将对象序列化为 JSON 字符串，存储到 localStorage
      localStorage.setItem('user', JSON.stringify(this.loginForm));
      alert('登录成功，状态已保存！');
    },
    logout() {
      localStorage.removeItem('user'); // 删除存储的 JSON 数据
      this.loginForm.name = '';
      alert('已退出登录');
    }
  },
  // 组件创建时检查本地存储
  created() {
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      this.loginForm = JSON.parse(storedUser); // 读取并解析
    }
  }
};
</script>

生成并下载 JSON 文件

有时需要将数据导出为 JSON 文件（如配置导出、数据备份），可通过 Blob 和 URL.createObjectURL 实现。