账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    Vue3 如何正确使用 异步provide/inject
    61
    0
    目前来看代码能正常运行,但有几个问题没想明白,先上代码父组件<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获取的值一直是默认值0,后来用watch就一切正常了,因为watch里面需要获取dom,那么watch是否都是在onMounted之后执行的呢,根据我目前console.log打印的结果来看,watch每次都是在挂在后执行的,因为还是有些不确定这样写到底对不对,所以来向大家请教
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • SSD 普通会员 1楼

      在 Vue3 中，可以使用 async/await 来异步提供和注入组件。同时，Vue3 也引入了 VueProvider 和 VueInjections，可以更好地管理组件的依赖关系。

      首先，创建一个 Vue 服务和一个 Vue 组件：

      ```vue // my-vue.service.js import { Vue } from 'vue'; import axios from 'axios';

      export default { props: { api: { type: String, required: true } }, mounted() { this.fetchData(); }, methods: { fetchData() { axios.get(this.api).then(response => { console.log(response.data); }); } } } ```

      ```vue // my-vue.component.js import axios from 'axios';

      export default { props: { api: { type: String, required: true } }, mounted() { this.$axios.get(this.api).then(response => { console.log(response.data); }); } } ```

      接下来，我们需要在父组件中注入这两个组件：

      ```vue // app.vue

      ```

      在这个例子中，fetchData 方法会返回一个新的 Promise，然后由 VueProvider 注入的组件调用 resolve 方法来处理响应。

      最后，使用 async/await 来处理 fetchData 方法的结果：

      ```vue // main.js import Vue from 'vue'; import App from './App.vue'; import MyVUEComponent from './my-vue.component.vue';

      Vue.config.productionTip = false;

      new Vue({ el: '#app', render: h => h(App) }).$mount('#app');

      new Vue({ el: '#app', render: h => h(MyVUEComponent) }).$mount('#app');

      // 现在在模板中使用 async/await 来处理 fetchData 方法的结果 async function fetchData() { try { const response = await this.fetchData(); console.log(response); } catch (error) { console.error(error); } }

      fetchData(); ```

      在这个例子中，fetchData 方法的异步结果会被渲染到模板中，即使在组件挂载期间，如果在 fetchData 方法中发生错误，也会立即在模板中捕获错误并显示给用户。

    0 打赏 回复
    • 卍魅惑 普通会员 2楼

      在 Vue3 中，可以使用 async/await 来异步提供和注入组件。同时，Vue3 也引入了 VueProvider 和 VueInjections，可以更好地管理组件的依赖关系。

      首先，创建一个 Vue 服务和一个 Vue 组件：

      ```vue // my-vue.service.js import { Vue } from 'vue'; import axios from 'axios';

      export default { props: { api: { type: String, required: true } }, mounted() { this.fetchData(); }, methods: { fetchData() { axios.get(this.api).then(response => { console.log(response.data); }); } } } ```

      ```vue // my-vue.component.js import axios from 'axios';

      export default { props: { api: { type: String, required: true } }, mounted() { this.$axios.get(this.api).then(response => { console.log(response.data); }); } } ```

      接下来，我们需要在父组件中注入这两个组件：

      ```vue // app.vue

      ```

      在这个例子中，fetchData 方法会返回一个新的 Promise，然后由 VueProvider 注入的组件调用 resolve 方法来处理响应。

      最后，使用 async/await 来处理 fetchData 方法的结果：

      ```vue // main.js import Vue from 'vue'; import App from './App.vue'; import MyVUEComponent from './my-vue.component.vue';

      Vue.config.productionTip = false;

      new Vue({ el: '#app', render: h => h(App) }).$mount('#app');

      new Vue({ el: '#app', render: h => h(MyVUEComponent) }).$mount('#app');

      // 现在在模板中使用 async/await 来处理 fetchData 方法的结果 async function fetchData() { try { const response = await this.fetchData(); console.log(response); } catch (error) { console.error(error); } }

      fetchData(); ```

      在这个例子中，fetchData 方法的异步结果会被渲染到模板中，即使在组件挂载期间，如果在 fetchData 方法中发生错误，也会立即在模板中捕获错误并显示给用户。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部