Правильный способ реализации класса JavaScript в VueJS

Question

Поскольку мой основной компонент одной из моих страниц становится немного большим и трудным для чтения, я хотел бы перенести некоторые методы в класс контроллера внешнего интерфейса. Вот мой тестовый класс, который находится в подпапке controller/SporteventsController.js

export class SporteventsController{
    test(){
        return 'Printing test';
    }
}

Я импортирую класс в свой компонент следующим образом:

import {SporteventsController} from "./controller/SporteventsController.js";

для тестирования Я просто выводю возвращаемое значение метода test на консоль через метод

    methods: {
        testmethod() {
            console.log(SporteventsController.prototype.test());
        }
    },

Я пытался найти в Интернете более подходящий способ импорта стандартного класса ES6 в компонент vuejs, но без удовлетворительного результата.

То, как я это сделал выше, почти хорошо, но почему я должен использовать прототип, а не могу просто использовать SporteventsController.test()?

Answer 1

Если вы хотите определить функцию класса для SporteventsController, вам нужно использовать ключевое слово static:

Ключевое слово static определяет статический метод для класса.Статические методы не вызываются в экземплярах класса.Вместо этого они вызваны на сам класс.Часто это служебные функции, такие как функции для создания или клонирования объектов.( источник )

//SporteventsController.js

export default class SporteventsController {
  static test() {
    console.log("test");
  }
}

// component

<template>
  <div>
    <button @click="testFromController">click</button>
  </div>
</template>

<script>
import SporteventsController from "./controller/SporteventsController";

export default {
  methods: {
    testFromController() {
      SporteventsController.test()
    }
  }
}
</script>

Answer 2

Чтобы использовать .test (), вам нужно создать экземпляр SporteventsController.

export default {
    data () {
        return {
            sporteventsController: new SporteventsController()
        }
    }
}

Затем вы можете позвонить this.sporteventsController.test()

Вы также можете проверить plugins или mixins .