Vue.js 中如何读写 JSON 数据:全面指南
在 Vue.js 开发中,JSON(JavaScript Object Notation)作为轻量级的数据交换格式,被广泛应用于前后端数据交互、本地存储、配置文件等场景, Vue 中 JSON 数据的读写方法,是开发高效应用的基础,本文将从读取 JSON 数据和写入 JSON 数据两个核心方向,结合具体场景和代码示例,系统介绍 Vue.js 中操作 JSON 的常用方法。
读取 JSON 数据
读取 JSON 数据是 Vue 开发的常见需求,主要分为静态 JSON 文件读取、动态 API 接口读取和本地存储读取三种场景。
读取静态 JSON 文件(如本地配置文件)
在项目中,若需要加载本地的 JSON 文件(如 config.json、data.json),可通过 Vue 的生命周期钩子或 axios 等工具实现。
场景示例:加载本地 data.json 文件
假设项目结构如下:
src/
├── assets/
│ └── data.json # 静态 JSON 文件
└── components/
└── DataReader.vue
在 Vue 组件中,可直接通过 若 JSON 文件需通过动态路径加载(如用户上传的配置文件),可使用 实际开发中,JSON 数据多来自后端 API 接口(如 RESTful API),此时需通过 浏览器提供的 写入 JSON 数据的核心是将 JavaScript 对象/数组序列化为 JSON 字符串,并存储到目标位置(如 API 接口、本地存储或文件),常见场景包括提交数据到后端、保存到本地存储和生成 JSON 文件下载。 通过 需先将对象序列化为 JSON 字符串,再通过 有时需要将数据导出为 JSON 文件(如配置导出、数据备份),可通过 data.json
{
"user": {
"name": "张三",
"age": 25
},
"hobbies": ["阅读", "游泳", "编程"]
}
方法 1:通过
import 直接导入(适用于 Vue CLI/Vite 项目)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 动态加载(适用于需要动态路径的场景)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 数据
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 数据
将数据写入 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)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 文件
Blob 和 URL.createObjectURL 实现。



还没有评论,来说两句吧...