Компонент без шаблона

У меня есть немного кода, который делает вызов API на сервер и возвращает некоторый JSON.

Он существовал как метод в моем компоненте, но, поскольку он становится немного длинным, я хочу извлечь его в свой собственный файл.

В vuejs, что здесь лучше всего.

  • должен ли это быть компонент без шаблона? Как это будет работать?

  • я просто создам модуль es6?


module components vuejs2 structure
person LeBlaireau    schedule 17.04.2018    source источник

Ответы (2)


arrow_upward
19
arrow_downward

Я бы предложил использовать миксин здесь.

В файле типа myCoolMixin.js определите свой миксин...

export default {
   methods: {
      myAwesomeMethod() {
         //do something cool...
      }
   }
}

Вы можете определить что угодно в миксине так же, как компонент. например объект данных, вычисляемые или отслеживаемые свойства и т. д. Затем вы просто включаете миксин в свой компонент.

import myCoolMixin from '../path/to/myCoolMixin.js'

export default {
   mixins: [myCoolMixin],
   data: function() {
      return: {
         //... 
      }
    },
    mounted: function() {
       this.myAwesomeMethod(); // Use your method like this!  
    }
 }

Подробнее о миксинах здесь: https://vuejs.org/v2/guide/mixins.html

person skribe    schedule 17.04.2018
comment
Отличный способ повторного использования кода. Спасибо, что сделали это так ясно. Это очень похоже на старые добрые сервисы AngularJS :) - person germanio; 14.06.2019
comment
Важное примечание о примесях: они влияют на ВСЕ компоненты и подкомпоненты. Хотя он работает как глобальная библиотека для проекта (только методы), обработка внутри смонтированных или созданных хуков миксина будет выполнять этот сценарий обработки столько раз, сколько загруженных компонентов и подкомпонентов для всех смонтированных точек входа. - person Raywell; 17.03.2020
comment
@Raywell Вы путаете это с глобальным миксином. Если вы добавите миксин, как в этом ответе — через mixins: [myCoolMixin] — тогда он будет добавлен только к этому компоненту. - person Raphael Schmitz; 10.07.2021

arrow_upward
1
arrow_downward

Миксины работают, или вы можете создать плагин. Вот пример документов:

MyPlugin.install = function (Vue, options) {
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // something logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // something logic ...
  }
}

Плагины Vue

person DigitalDrifter    schedule 17.04.2018
comment
Мне нравится ответ, и я обязательно рассмотрю плагины, хотя я думаю, что миксины здесь лучше подходят. Спасибо. - person LeBlaireau; 17.04.2018
comment
Лично я предпочитаю миксины, плагины, которые я выбираю только тогда, когда у меня есть большой набор функций, совместно используемых - person DigitalDrifter; 17.04.2018