执行fetchData方法后如何更新初始化数组的内容？

Question

我对 Vue.js 比较陌生，我正在开发一个项目，需要使用 fetchData 方法更新组件的 data() 部分中的初始化数组。这是我的代码的简化版本：

<script>
  import axios from 'axios';
  import Footer from '@/components/Footer'; 
  import Sidebar from '@/components/Sidebar'; 
  import BarChart from '@/components/ChartJS/Barchart';
 

  
  export default {
    name: 'Dashboard',
    components: {
      Footer,
      Sidebar, 
      BarChart,
     
  
    },
    data() {

  const data1 = [];
  const data2 = [];
  const data3 = [];
  const data4 = [];
  const data5 = [];
  const data6 = [];

//I want to make the data being processed in the fetchData method to be updated right here

  const data1Count = data1.length;
  const data2Count  = data2.length;
  const data3Count  = data3.length;
  const data4Count = data4.length;
  const data5Count = data5.length;
  const data6Count = data6.length;
      return {

    Cluster: {
        labels: ['Data 1', 
                  'Data 2', 
                  'Data 3',  
                  'Data 4',
                  'Data 5', 
                  'Data 6',
                 ],
         values: [data1Count , data2Count  , data3Count  , data4Count , data5Count , data6Count ],
         backgroundColor: ['rgba(25, 82, 105, 0.6'],
          },
      };
    },

    methods: {
    fetchData() {
      axios
        .get('http://127.0.0.1:8000/api/dataList')
        .then(response => {

          this.data1 = [];
          this.data2  = [];
          this.data3  = [];
          this.data4 = [];
          this.data5  = [];
          this.data6 = [];

          response.data.forEach(item => {
            const clusterName = item.Cluster;

            switch (clusterName) {
              case 'Data 1':
                this.data1.push(item);
                break;
              case 'Data 2':
                this.data2.push(item);
                break;
              case 'Data 3':
                this.data3.push(item);
                break;
              case 'Data 4':
                this.data4.push(item);
                break;

              case 'Data 5':
                this.data5.push(item);
                break;  
                
              case 'Data 6':
                this.data6.push(item);
                break; 

              default:
                break;
            }
          }
          );
          
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
  },
  mounted() {
    this.fetchData();
  },
  };
  </script>

我的挑战是让 fetchData 方法直接更新 data() 部分中初始化的数组（data1、data2、data3、data4、data5 和 data6）。我想用通过 fetchData 方法从 API 检索的数据动态填充这些数组。目标是使这些数组可以随时在我的图表组件中使用。

任何有关如何实现这一目标的指导、示例或最佳实践将不胜感激。我对 Vue.js 比较陌生，分步解释或代码片段会特别有帮助。预先感谢您的协助！

Answer 1

所以如果我正确理解这一点，你想从你的 api 获取 items 数组。然后将这些项目附加到相关数组中，然后将这些数组的长度添加到 Cluster.values 属性中。

代码的 data() 部分中不需要有那么多数组。我建议使用对象/映射来存储它。您可以通过以下方式（namesMap）来做到这一点：

data() { 
  return {
    namesMap: {'Data 1': [], 'Data 2': [], 'Data 3': [], ...},
    Cluster: {
        labels: ['Data 1', 'Data 2', 'Data 6'],
        values: [],
        backgroundColor: ['rgba(25, 82, 105, 0.6']
    },
  };

}

之后，在方法部分中，您可以进行 api 调用，循环所有项目并检查它们的名称是否与您在名称映射中的名称匹配。只有这样，您才能将该项目添加到相应的列表中。

methods: {
async fetchData () {
    const items = await axios.get('.../api/dataList')
    for (let i = 0; i < items.length; i++) {
        const clusterName = items[i].Cluster
        if (clusterName in Object.keys(this.namesMap)) {
            this.namesMap[clusterName].push(items[i])
        }
    }
    // fill the Cluster.values prop
    Object.keys(this.namesMap).forEach(k => {
        this.Cluster.values.push(this.namesMap[k].length)
    })
    // also do not forget to reset the values of namesMap at the end so that the next loop can work properly
    this.namesMap = {'Data 1': [], 'Data 2': []}
},