Vue.js 如何实现初始无过滤参数加载通用图表数据

当前代码的核心问题：refresh方法无差别拼接所有筛选状态为请求参数，页面首次加载时所有筛选值都处于未选择的空值状态，拼出的请求参数为无效空值，后端无法匹配返回正确的通用全量数据，最终导致图表渲染空白。

具体实现逻辑 #

• 在组件data中新增标记位isInitialLoad，初始值设为true，用来区分当前请求是首次加载还是用户触发的筛选查询
• 标记为true时，请求跳过所有参数拼接逻辑，直接调用不带筛选条件的基础接口
• 首次请求完成后将标记位改为false，后续所有用户触发的查询操作，才读取当前选中的筛选值、拼接为参数发起请求
• 移除原代码中冗余的空this.$axios.get()无效调用

修改后的可直接运行的代码 #

data() {
  return {
    // 新增首次加载标记
    isInitialLoad: true,
    // 原有筛选状态、图表数据
    situacao: [],
    cliente: {},
    especialidade: {},
    tipos: {},
    helpDesk: {},
    supervisor: {},
    prazos: {}
  }
},
mounted() {
  this.refresh()
},
methods: {
  refresh() {
    let requestUrl = "/Operacional/GetRelatorio/"
    // 仅非首次加载时拼接筛选参数
    if (!this.isInitialLoad) {
      const situacao = this.situacao.map(st => st.id)
      const cliente = this.cliente.id
      const especialidade = this.especialidade.id
      const tipo = this.tipos.id
      const helpDesk = this.helpDesk.id
      const supervisor = this.supervisor.id
      const params = {
        tipo: tipo,
        situacao: situacao,
        cliente: cliente,
        helpDesk: helpDesk,
        especialidade: especialidade,
        supervisor: supervisor     
      }
      requestUrl = requestUrl + "?" + qs.stringify(params, { arrayFormat: 'repeat' })
    }
    // 统一发起请求
    this.$axios.get(requestUrl)
      .then(res => { 
        this.prazos = res.data
        this.$refs.chart1.updateSeries([{
          name: 'NO PRAZO',
          data: [this.prazos.noPrazo, this.prazos.emDia, this.prazos.atrasadas]
        }])
        // 请求完成后切换标记位，后续走带参逻辑
        this.isInitialLoad = false
      })
  },
  // 用户点击筛选查询按钮时绑定的触发方法
  handleFilterSubmit() {
    this.refresh()
  }
}

注意事项 #

• 所有筛选绑定的状态要设置合理的初始空值，避免取嵌套属性时抛错：比如单选下拉框初始值设为{}、多选框初始值设为空数组[]
• 实现重置筛选功能时，只需将isInitialLoad改回true，重新调用refresh方法即可自动回到无参请求逻辑，无需单独写重置接口的调用逻辑
• 若存在筛选项被清空的场景，可以直接跳过空值的参数拼接，减少无效参数传递

内容的提问来源于stack exchange，提问作者Christian Guimarães