uni-app main.js引用全局问题

Question

common.js

function  add(a,b) => {
    return a+b
}

const sub = (a,b) => {
    return a-b
}

module.exports = {
    add,
    sub
}

main.js

```typescript
import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'

import common from './common/common.js';
Vue.prototype.$common = common;

const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
    createSSRApp
} from 'vue'

export function createApp() {
    const app = createSSRApp(App)
    return {
        app
    }
}
// #endif

index.vue

export default {
        data() {
            return {
                
            }
        },
        onLoad(){
            console.log(this.$common.add(1,1))
        },
        methods: {
            
        }
    }

console.log(this.$common.add(1,1))
调用时报错
‍[⁠TypeError⁠]‍ {message: "Cannot read property 'add' of undefined"}

怎么解决？求解。

Answer 1

引自免费微信小程序：皆我百晓生

在您的代码中，您试图在Vue组件中通过this.$common访问在common.js中导出的对象。但在Vue2和Vue3中，引入和使用全局方法的方式略有不同。

对于Vue2： 确保已经在主入口文件（这里是main.js）中正确导入并添加到Vue原型链上。您的代码看起来已经做到了这一点：

import common from './common/common.js';
Vue.prototype.$common = common;

然后，在Vue组件中，你应该能正常地使用this.$common.add(1, 1)。

对于Vue3： 在Vue3中，由于不再支持全局混入到Vue.prototype，因此你需要在每个组件内部使用setup()函数或者在父组件中将这些方法作为props传递给子组件。然而，如果你想要在整个应用中共享这些方法，可以考虑使用插件或者自定义选项。

首先，创建一个插件，比如命名为commonMethodsPlugin.js:

import { defineComponent } from 'vue';

export default {
  install(app) {
    app.provide('commonMethods', {
      add: function(a, b) {
        return a + b;
      },
      sub: function(a, b) {
        return a - b;
      },
    });
  },
};

然后在main.js中安装这个插件：

import { createApp } from 'vue';
import App from './App.vue';
import commonMethodsPlugin from './commonMethodsPlugin';

createApp(App)
  .use(commonMethodsPlugin)
  .mount('#app');

接着，在Vue3组件中，你可以在setup()函数中通过inject获取这些方法：

<script setup>
import { inject } from 'vue';

const commonMethods = inject('commonMethods');

onLoad() {
  console.log(commonMethods.add(1, 1));
}
</script>

<template>
  <!-- Your template code here -->
</template>

这样应该就能解决你在Vue2和Vue3中调用$common.add(1, 1)时遇到的问题了。