Vue中实现动态更新JSON数据的三种方式

<template>
  <div>
    <h3>JSON 数据列表</h3>
    <ul>
      <li v-for="(item, index) in jsonData" :key="index">
        {{ item.name }}
        <button @click="updateData(index)">更新</button>
      </li>
    </ul>
  </div>
</template>

<script>
import jsonData from '@/assets/data.json'; // 引入 JSON 文件

export default {
  data() {
    return {
      jsonData: [...jsonData], // 深拷贝 JSON 数据
    };
  },
  methods: {
    updateData(index) {
      // 修改 JSON 数据
      this.jsonData[index].name = `Updated Name ${index}`;
      console.log('更新后的数据:', this.jsonData);

      // 如果需要持久化，可以保存到 localStorage
      localStorage.setItem('updatedData', JSON.stringify(this.jsonData));
    },
  },
  mounted() {
    // 如果有保存的数据，从 localStorage 加载
    const savedData = localStorage.getItem('updatedData');
    if (savedData) {
      this.jsonData = JSON.parse(savedData);
    }
  },
};
</script>

<template>
  <div>
    <h3>JSON 数据列表</h3>
    <ul>
      <li v-for="(item, index) in jsonData" :key="item.id">
        {{ item.name }}
        <button @click="updateData(item.id, index)">更新</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      jsonData: [], // 初始化为空数组
    };
  },
  mounted() {
    this.fetchData(); // 页面加载时获取数据
  },
  methods: {
    // 获取数据
    async fetchData() {
      try {
        const response = await axios.get('/api/getData'); // 假设后端提供获取数据的接口
        this.jsonData = response.data;
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    },
    // 更新数据
    async updateData(id, index) {
      try {
        // 修改当前数据
        const newName = `Updated Name ${index}`;
        this.jsonData[index].name = newName;

        // 调用后端更新接口
        await axios.put(`/api/updateData/${id}`, { name: newName });

        console.log('数据更新成功:', this.jsonData);
      } catch (error) {
        console.error('更新数据失败:', error);
      }
    },
  },
};
</script>

<template>
  <div>
    <h3>实时 JSON 数据列表</h3>
    <ul>
      <li v-for="(item, index) in jsonData" :key="item.id">
        {{ item.name }}
        <button @click="updateData(item.id, index)">更新</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonData: [], // 初始化为空数组
      socket: null, // WebSocket 实例
    };
  },
  mounted() {
    // 创建 WebSocket 连接
    this.socket = new WebSocket('ws://your-websocket-url');

    // 监听消息
    this.socket.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      this.jsonData = newData; // 更新数据
    };

    // 监听连接关闭
    this.socket.onclose = () => {
      console.log('WebSocket 连接已关闭');
    };
  },
  methods: {
    // 更新数据并通过 WebSocket 发送请求
    updateData(id, index) {
      const newName = `Updated Name ${index}`;
      this.jsonData[index].name = newName;

      // 发送更新请求
      this.socket.send(
        JSON.stringify({
          id,
          name: newName,
        })
      );
    },
  },
  beforeDestroy() {
    // 关闭 WebSocket 连接
    if (this.socket) {
      this.socket.close();
    }
  },
};
</script>