web-dev-qa-db-ja.com

一般的なコンポーネントメソッドを＃NUXT.JSに保存する場所

実際、＃NUXT.JSの共通コンポーネントメソッドをどこに保存するかを知りたいです。

私が試したもの。 ->ミドルウェアにミドルウェアはリクエストとサーバーへの応答しか処理できないため、一般的なコードをミドルウェアに保存します（役に立たない）。

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

私は mixins に行きます。普通のvue.jsと同じです。唯一の違い-グローバルミックスインの場合-プラグインとして含めるが、最初に：

非グローバルミックスイン

ミックスイン用に追加のフォルダーを作成します。たとえば、_/mixins/testMixin.js_

_export default {
  methods: {
    aCommonMethod () {}
  }
}
_

次に、レイアウト、ページ、またはコンポーネントをインポートし、mixinsオブジェクトを介して追加します。

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


グローバルミックスイン

たとえば、新しいファイル_plugins/mixinCommonMethods.js_の場合：

_import Vue from 'vue'

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

そのファイルを_nuxt.config.js_に含めます

_plugins: ['~/plugins/mixinCommonMethod']
_

その後、どこでも使用可能なメソッドを用意し、this.commonMethod()で呼び出します。しかし、vue.js docsからのアドバイス：

グローバルミックスインは、サードパーティのコンポーネントを含む作成されたすべてのVueインスタンスに影響するため、まばらに慎重に使用してください。ほとんどの場合、上記の例で示したようなカスタムオプション処理にのみ使用してください。また、アプリケーションの重複を避けるために、プラグインとして出荷することをお勧めします。


$ rootとコンテキストに注入する

別の可能性は、$ rootとコンテキストに挿入

54
Soleno