Vue3 如何正确使用 异步provide/inject

  • Z时代
  • 2024-02-28
  • 分类：IT

Vue3 如何正确使用 异步provide/inject

目前来看代码能正常运行,但有几个问题没想明白,先上代码

父组件

<template>
  <div class="container">
    <china-map></china-map>
    <echart></echart>
  </div>
</template>
<script>
/*省略import*/
export default {
  components: { ChinaMap, Echart },
  name: "MapIndex",
  setup() {
    let yiwancheng = ref("0");
    let weiwancheng = ref("0");
    let zongliang = ref("0");
    provide("yiwancheng", yiwancheng);
    provide("weiwancheng", weiwancheng);
    provide("zongliang", zongliang);
    DATA.FindAllProgress().then((res) => {
      yiwancheng.value = res.data.data["已完成"];
      weiwancheng.value = res.data.data["未完成"];
      zongliang.value = res.data.data["总量"];
    });
    return {
      yiwancheng,
      weiwancheng,
      zongliang,
    };
  },
};

inject 子组件

<template>
  <div class="pie-box">
    <span class="pie-title">比例</span>
    <div class="pie" id="pie"></div>
  </div>
</template>
<script>
/* 省略import */
export default {
  name: "Pie",
  setup() {
    const yiwancheng = inject("yiwancheng", 0);
    const weiwancheng = inject("weiwancheng", 0);
    function LoadPie(yiwancheng, weiwancheng, echart) {
        //加载echart 饼图 代码太多,这里省略了
    }
    watch([yiwancheng, weiwancheng], async ([yiwancheng, weiwancheng]) => {
      const pieChart = echarts.init(document.getElementById("pie"));
      pieChart.showLoading();
      LoadPie(yiwancheng, weiwancheng, pieChart);
    });
    onMounted(() => {
      console.log("挂载");
    });
    return {};
  },
};
</script>

之前我是在子组件 onMounted 中去获取inject数据和加载饼图的，但是inject获取的值一直是默认值0，后来改用watch就一切正常了，因为watch里面需要获取dom，那么watch是否都是在onMounted之后执行的呢，根据我目前console.log打印的结果来看，watch每次都是在挂在后执行的，因为还是有些不确定这样写到底对不对，所以来向大家请教

补充:问题已解决,出现问题原因是使用了原版echarts库,虽然在onMounted中获取inject的数据是初始值,但后续数值更新没有映射到视图中,除非在watch中重新调用LoadPie方法,后面改用了vue-echarts后成解决所有问题

回答：

不一定的！ 但是大概会是 onMounted之后执行 如果你想稳定是onMounted 之后执行 。
可以这样

 onMounted(()=>{
       DATA.FindAllProgress()
})

以上是 Vue3 如何正确使用 异步provide/inject 的全部内容， 来源链接： utcz.com/p/936588.html

回到顶部