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

Question

I have written some JS classes that I would like to import in the app.js/main.js file of my vue.js project so that I can instantiate them in the components. Right now I am having to import the same JS class in all the components where I need the class individually.

I've tried the import in the main.js file but the components don't recognize it.

in the main.js file, I am importing like as follows

import Permissions from './Permissions'

However, when I want to instantiate the Permissions class in my component like

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

the component doesn't know what Permissions is.

How do I let the component know what Permissions class is?

Answer 1

To do it in the vue way, you can create your own plugin or mixin. See detailed instructions here

So, you can create a permissions plugin in 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...
      })   
    }
  }
};

Then you have to tell vue to use your plugin:

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)
});

And lastly now from any component you should be able to use your function like:

this.$getPermissions(properties)