Блог

Я написал несколько классов JS, которые я хотел бы импортировать в app.js/main.js досье моего vue.js проект, чтобы я мог создавать их экземпляры в компонентах. Прямо сейчас мне приходится импортировать один и тот же класс JS во все компоненты, где мне нужен класс по отдельности.

Я пробовал импортировать в main.js файл, но компоненты его не распознают.

в main.js файл, я импортирую следующим образом

import Permissions from './Permissions'

Однако, когда я хочу создать экземпляр класса разрешений в моем компоненте, например

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

компонент не знает, что Permissions такое.

Как мне сообщить компоненту, что Permissions это за класс?

Чтобы сделать это способом vue, вы можете создать свой собственный плагин или миксин. Смотрите подробные инструкции здесь

Итак, вы можете создать плагин разрешений в 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)