Vue3.0在main.js配置全局属性,及其代替vue2的this、接口使用等等

注入全局api接口对比

接口封装没什么区别，v2怎么封装，v3拿过来用就行了，主要是在main.js全局的注入使用有所区别

1. v2

//main.js
import Vue from 'vue';
import App from './App.vue';
import api from './http/api/api.js'//数据接口

Vue.prototype.$api = api;

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

2. v3
   在vue3.0中注入全局方法不是在prototype上挂载了，而是在config.globalProperties属性上，我在api前面加个$符号还是继承vue2的规范习惯代表全局；

//main.js
import { createApp } from "vue";
import App from "./App.vue";
import api from './http/api/api'//后端数据接口
const app = createApp(App);
app.config.globalProperties.$api=api;
app.mount("#app");

注入后使用

1. vue2.0

//直接用this点
<script>
export default {
  data() {
    return {
      users: { account: "", password: "" },
    };
  },
  methods: {
    async login() {
      const {data} = await this.$api.users.login(this.users);
     }
      },
};
</script>

2. vue3.0
   getCurrentInstance代表全局上下文，ctx相当于Vue2的this,
   //但是特别注意ctx代替this只适用于开发阶段，等你放到服务器上运行就会出错，
   //后来查阅资料说的得用proxy替代ctx，才能在你项目正式上线版本正常运行

<template>
<button @click="getArticleAll">获取接口数据</button>
</template>

<script>
import { getCurrentInstance, reactive, ref, } from "vue";
export default {
    setup(){
    //getCurrentInstance代表全局上下文，ctx相当于Vue2的this,
    //但是特别注意ctx代替this只适用于开发阶段，等你放到服务器上运行就会出错，
    //后来查阅资料说的得用proxy替代ctx，才能在你项目正式上线版本正常运行
    let {ctx,proxy}=getCurrentInstance();
    //返回方法供页面使用
        return {...getArticleAllFn(proxy)}
    }
};
//功能模块方法提取出setup中   体现VUE3的灵魂
function getArticleAllFn(proxy) {
 let needData=ref('后端需要的参数')
  async function getArticleAll() {
    try {
    //你封装的接口
     //const data = await ctx.$api.article.getArticleAll(needData);//ctx只能在开发阶段正常使用
      const data = await proxy.$api.article.getArticleAll(needData);
    } catch (error) {
      console.log(error);
    }
  }
 
  return { getArticleAll };
}
</script>

有用的话还是点个赞吧！！！！！！！