vue3API的provide和inject

因为刚自己在研究vue3+echarts。 所以用到啦provide和inject

我看啦一下文档。 provide和inject其实是为啦解决隔代传输数据的问题
所以我将echart实例放在app组件中，通过provide引入echart实例，这样每个页面都可以访问到啦

//App.vue
<script lang="ts">
import { defineComponent, provide } from 'vue'
import * as echarts from 'echarts'
export default defineComponent({
  name: 'App',
  setup(){
   provide('ec',echarts)
  }
})
</script>

• 每个页面通过inject就可以拿到echarts实例啦
• let echarts = inject(“ec”);
• provide和inject并不是响应式的，如果需要响应式可用ref，reactive方法设置要传输数据

// 1===provide('todoLength',this.todos.length)
  provide() {
    return {
      todoLength: this.todos.length
    }
  },
 // 2
 provide: {
    user: 'John Doe'
  },