Vue3项目中重构Vue.prototype.$dbCon的替代方案求助

方案一：使用app.config.globalProperties（最接近原用法，改动最小） #

这是Vue3官方推荐的替代Vue.prototype挂载全局属性的方案，和原代码逻辑几乎一致，组件调用方式无需修改。

修改dbConnector.js #

dbConnector.install = function (app, options) { // 注意：Vue3插件install的第一个参数是app实例，不是Vue构造函数
  console.log("Installing dbConnector... ");

  app.config.globalProperties.$dbCon = {
    testConnection: function() {
       return "Testing connection: Connector listening...";
    },
    requestViewData: function(caller, param) {
        var url = "dataRequest.php";
        return dbConnector.createGETPromise(caller, url, param);
    },
    // ...其他原有方法
  }
}

修改main.js（去掉多余的mixin） #

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import dbCon from './resource/dbConnector'

const app = createApp(App)
  .use(store)
  .use(dbCon) // use会自动调用install并传入app实例
  .use(router)
  .mount('#app');

组件调用（无需修改原代码） #

Home.vue中依然可以用this.$dbCon调用，和Vue2完全一致：

async mounted () {
  console.log("Testing PHP connection")
  this.$dbCon.requestViewData(...)
  // ...其他逻辑
}

方案二：正确使用provide/inject（依赖注入方式） #

之前失败的原因是未在插件中通过app.provide全局提供依赖，而是直接调用组件内的provide方法。

修改dbConnector.js #

dbConnector.install = function (app, options) {
  console.log("Installing dbConnector... ");
  const dbCon = {
    requestViewData: function(caller, param) {
        var url = "dataRequest.php";
        return dbConnector.createGETPromise(caller, url, param);
    },
    // ...其他原有方法
   }
   app.provide('$dbCon', dbCon) // 使用app实例的provide方法全局注入
}

组件调用（Options API） #

import { inject } from 'vue'

export default {
  async mounted () {
    console.log("Testing PHP connection")
    const $dbCon = inject('$dbCon')
    $dbCon.requestViewData(...)
    // ...其他逻辑
  }
}

组件调用（组合式API/setup） #

import { inject, onMounted } from 'vue'

export default {
  setup() {
    const $dbCon = inject('$dbCon')
    
    onMounted(async () => {
      console.log("Testing PHP connection")
      $dbCon.requestViewData(...)
    })
    
    return {}
  }
}

两种方案对比 #

• 全局属性方案：改动成本极低，完全兼容原Vue2的调用方式，适合全局通用的工具类场景
• provide/inject方案：符合Vue3的依赖注入设计思想，便于后续测试时替换依赖，也适合需要按需注入的场景

内容的提问来源于stack exchange，提问作者17b23802