Vue3+Vuex项目vue3-chart-js图表首次加载未使用接口数据问题

• 核心是@j-t-mcc/vue3-chartjs组件默认初始化后不会自动响应prop数据变更重绘。首次加载时，beforeMount生命周期中触发的接口请求是异步操作，请求返回前组件已经完成首次渲染，图表用Vuex初始的0值完成了初始化。后续接口返回更新Vuex状态后，虽然模板上的插值能响应式更新，但图表组件没有监听数据变更触发重绘，因此一直显示初始值。
• 跳转页面再返回时，Vuex已经存储了接口返回的统计值，组件初始化时直接拿到正确数据渲染，因此表现正常。
• 补充：你的Vuex代码存在两处逻辑缺失：
  1. state中未声明nbOk变量，也没有在SET_DATA mutation中统计OK状态的数量，会导致nbOk取值异常。
  2. SET_DATA中循环统计完成后，没有主动赋值state.nbOk的逻辑。

方法1：加key强制组件重建（最简单） #

给vue3-chart-js组件绑定动态key，key依赖Vuex中的三个统计值，数值变化时自动销毁重建组件，用最新数据渲染：

<vue3-chart-js
    :key="`doughnut-${$store.state.nbOk}-${$store.state.nbWarning}-${$store.state.nbError}`"
    :id="data.doughnutChart.id"
    :type="data.doughnutChart.type"
    :data="data.doughnutChart.data"
    :options="data.doughnutChart.options"
></vue3-chart-js>

方法2：手动调用图表更新方法 #

给组件加ref，监听Vuex状态变化后手动触发图表更新：

<!-- 模板部分加ref -->
<vue3-chart-js
    ref="doughnutChart"
    :id="data.doughnutChart.id"
    :type="data.doughnutChart.type"
    :data="data.doughnutChart.data"
    :options="data.doughnutChart.options"
></vue3-chart-js>

// script部分加watch
export default {
  // 原有逻辑不变
  watch: {
    '$store.state.nbOk'() {
      this.$refs.doughnutChart?.update()
    },
    '$store.state.nbWarning'() {
      this.$refs.doughnutChart?.update()
    },
    '$store.state.nbError'() {
      this.$refs.doughnutChart?.update()
    }
  }
}

补全Vuex缺失逻辑 #

修改Vuex的index.js代码：

export default createStore({
  state: {
    data: [],
    nbError : 0,
    nbWarning : 0,
    nbOk: 0 // 新增nbOk声明
  },
  mutations: {
    SET_DATA(state, data){
      state.data = data.data;
      state.nbWarning = 0;
      state.nbError = 0;
      state.nbOk = 0; // 初始化nbOk
      for (let i = 0; i < state.data.length; i++) {
        if(state.data[i].status == 'WARNING'){
          state.nbWarning += 1;
        };
        if(state.data[i].status == 'ERROR'){
          state.nbError += 1;
        };
        if(state.data[i].status == 'OK'){ // 新增OK状态统计
          state.nbOk += 1;
        };
      };
    }
  }
  // 原有其他逻辑不变
})

内容的提问来源于stack exchange，提问作者Kate P