add

README.MD

@@ -1 +1,4 @@
-vue3 项目，主要用于展示VUE3的各种DEMO
+vue3 项目，主要用于展示VUE3的各种DEMO
+
+
+> https://vue3js.cn/docs/zh/api/composition-api.html#setup

src/api/index.js

@@ -1,8 +1,14 @@
 import {onMounted,ref} from "vue"
 import {request_} from "./request";
 
-export default {
+const fuck = {
+    install(app){
+        app.provide("$http",fuck)
+        // app.config.globalProperties.$http = fuck;
+    },
     bannerData: (data)=>request_("GET",'https://gank.io/api/v2/banners',data),
     articleData: (data)=>request_("GET",'https://gank.io/api/v2/data/category/GanHuo/type/frontend/page/1/count/10',data),
     articleDetail: (data)=>request_("GET",'https://gank.io/api/v2/post/'+data)
 }
+
+export default fuck

src/main.js

@@ -1,13 +1,21 @@
 import {createApp} from 'vue'
 import router from "./router/index"
 import App from './App.vue'
+import api from "./api/index"
 import Header from "@/components/Header.vue"
 import Image from "@/components/Image.vue"
 import Mobile from "@/components/Mobile.vue"
 
 const app = createApp(App);
 app.use(router);
+app.use(api)
+
+app.config.globalProperties.name = 'xianyu'
+
 app.mount('#app')
 app.component("Header",Header)
 app.component("Image",Image)
 app.component("Mobile",Mobile)
+
+
+

src/pages/Demo/Demo.vue

@@ -2,4 +2,22 @@
   <Mobile>
     <router-view></router-view>
   </Mobile>
-</template>
+</template>
+
+<script>
+import { getCurrentInstance,inject, onMounted } from "vue";
+export default {
+  setup(props,context) {
+    console.log(context);
+    // 上面这个context不包含全局变量，应该就是提供一些内置接口用的
+    // 执行 setup 时，组件实例尚未被创建
+    const $http = inject('$http')
+    console.log($http);
+    const {ctx} = getCurrentInstance()
+    console.log(ctx);
+    onMounted(() => {
+      console.log("ctx", ctx.name); // xianyu
+    });
+  },
+};
+</script>