#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)
}

我去mixins https://v2.vuejs.org/v2/guide/mixins.html就像普通的 vue.js 一样。唯一的区别 - 对于全局 mixins - 我将它们作为插件包含在内，但首先：

非全局混入

我会为我的 mixins 创建一个额外的文件夹。例如在一个/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/mixinCommonMethods']

之后，您将在任何地方都可以使用该方法并在那里调用它this.commonMethod()。但这里有一个来自vue.js 文档 https://v2.vuejs.org/v2/guide/mixins.html#Global-Mixin:

谨慎谨慎地使用全局 mixins，因为它会影响创建的每个 Vue 实例，包括第三方组件。在大多数情况下，您应该仅将其用于自定义选项处理，如上例所示。将它们作为插件提供以避免重复应用也是一个好主意。

注入 $root 和上下文

另一种可能性是注入 $root 和上下文 https://nuxtjs.org/guide/plugins#inject-in-root-amp-context