如何在vue.js项目的main.js文件中导入js类并在所有组件中使用它而不是在每个组件中导入？

Posted 2021-03-30

我已经编写了一些我想在我的vue.js项目的app.js / main.js文件中导入的JS类，以便我可以在组件中实例化它们。现在我必须在我需要单独的类的所有组件中导入相同的JS类。

我已尝试在main.js文件中导入，但组件无法识别它。

在main.js文件中，我导入如下

import Permissions from './Permissions'

但是，当我想在我的组件中实例化Permissions类时

data() { permissions: new Permission({ some object properties... }) }

该组件不知道Permissions是什么。

如何让组件知道Permissions类是什么？

答案

要以vue方式执行此操作，您可以创建自己的插件或mixin。查看详细说明here

因此，您可以在permissions-plugin.js中创建权限插件

import Permissions from './Permissions'

const PermissionsPlugin = {
  install(Vue, options) {
    // This adds the $getPermissions method to all instances
    Vue.prototype.$getPermissions = function(properties) {
      return new Permission({
        some object properties...
      })   
    }
  }
};

然后你必须告诉vue使用你的插件：

import Vue from 'vue'
import PermissionsPlugin from './permissions-plugin.js'
import App from './App.vue'

// The plugin is loaded here.
Vue.use(PermissionsPlugin)

new Vue({
  el: '#app',
  render: h => h(App)
});

最后，现在从任何组件，你应该能够使用你的功能，如：

this.$getPermissions(properties)