web-dev-qa-db-fra.com

Où stocker les méthodes de composants communs dans # NUXT.JS

En fait, je veux savoir où stocker les méthodes de composants communs dans # NUXT.JS.

des choses que j'ai essayées. -> Stockage du code commun dans le middleware (son utilisation inutile) car, à ma connaissance, le middleware est uniquement capable de gérer les requêtes et les réponses au serveur.

methods: {

  // states methods.
  SwitchManager: function (__dataContainer, __key, __value) {
    // stand alone debugger for this module.
    let debug = __debug('computed:_3levelSwitch')
    // debug showing function loaded.
    debug('(h1:sizeCheck) creating switch..')
    // switch.
    switch (__key) {
      // fake allow set value to true of given key
      default:
        this[__dataContainer][__key][__value] = true
        break
    }
    return this[__dataContainer][__key][__value]
  },
  SizeCheck: function (__size) {
    // stand alone debugger for this module.
    let debug = __debug('tags:p')
    // debug showing function loaded.
    debug('(p:sizeCheck) checking..')
    // init switch.
    this.SwitchManager('pill', 'size', __size)
  },
  StateCheck: function (__state) {
    // stand alone debugger for this module.
    let debug = __debug('tags:h1')
    // debug showing function loaded.
    debug('(h1:sizeCheck) checking..')
    // init switch.
    this.SwitchManager('pill', 'state', __state)
  }
},
created () {
  // h1 tag size check
  this.SizeCheck(this.size)
  this.StateCheck(this.state)
}
javascriptvue.jsnuxt.js
17
J.Doe

Je choisis mixins comme avec plain vue.js. Seule différence - pour les mixins mondiaux - je les inclue en tant que plugin, mais d'abord:

Mixins non mondiaux

Je créerais un dossier supplémentaire pour mes mixins. Par exemple dans un /mixins/testMixin.js

export default {
  methods: {
    aCommonMethod () {}
  }
}

Importez ensuite une mise en page, une page ou un composant et ajoutez-le via l'objet mixins:

<script>
  import commonMixin from '~/mixins/testMixin.js
  export default {
    mixins: [commonMixin]
  }
</script>


Mixins mondiaux

Par exemple dans un nouveau fichier plugins/mixinCommonMethods.js:

import Vue from 'vue'

Vue.mixin({
  methods: {
    aCommonMethod () {}
  }
})

Incluez ce fichier puis dans nuxt.config.js

plugins: ['~/plugins/mixinCommonMethod']

Après cela, vous auriez la méthode partout disponible et l'appeler là avec this.commonMethod(). Mais voici un conseil des docs vue.js:

Utilisez les mixins globaux avec parcimonie et prudence, car cela affecte chaque instance Vue créée, y compris les composants tiers. Dans la plupart des cas, vous ne devez l'utiliser que pour la gestion d'options personnalisées comme illustré dans l'exemple ci-dessus. C'est aussi une bonne idée de les expédier sous forme de plugins pour éviter les applications en double.


Injecter dans $ root & context

Une autre possibilité serait de Injecter dans $ root & context

54
Soleno