vue3 app存储数据到.json文件

你可以使用浏览器的内置API来将数据存储到JSON文件中。下面是一个示例代码，展示了如何在Vue 3应用中将数据保存到JSON文件：

// 导入所需的模块
import { ref } from 'vue';

// 创建一个可响应的数据
const data = ref({
  name: 'John Doe',
  age: 25,
});

// 将数据保存到JSON文件
function saveDataToFile() {
  const jsonData = JSON.stringify(data.value);
  const blob = new Blob([jsonData], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'data.json';
  link.click();
  URL.revokeObjectURL(url);
}

// 在组件中调用保存数据的方法
export default {
  methods: {
    saveData() {
      saveDataToFile();
    },
  },
};

此代码创建了一个可响应的数据对象 `data`，其中包含名称和年龄字段。`saveDataToFile` 函数将 `data` 对象转换为JSON字符串，然后创建一个Blob对象，并使用URL.createObjectURL方法生成一个URL。接着，我们创建一个a标签并设置其href属性为生成的URL，并将download属性设置为要下载的文件名。最后，我们模拟用户点击该链接以触发文件下载，并使用URL.revokeObjectURL方法释放URL对象。

你可以在组件中调用 `saveData` 方法来保存数据。当用户点击该按钮时，将会下载一个名为 `data.json` 的文件，其中包含了保存的数据。

请注意，由于浏览器的安全性限制，这段代码只能在浏览器环境中运行，无法在服务器端使用。此外，还需要在Vue 3应用中正确引入和使用模块。