javascript - #NUXT.JS 中常用的组件方法存放在哪里

Question

其实我想知道在#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)
}

Answer 1

我去 mixins就像普通的 vue.js 一样。唯一的区别 - 对于全局混合 - 我将它们作为插件包含在内，但首先:

非全局混合

我会为我的 mixin 创建一个额外的文件夹。例如在 /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 docs 的建议:

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components. In most cases, you should only use it for custom option handling like demonstrated in the example above. It’s also a good idea to ship them as Plugins to avoid duplicate application.

在 $root 和上下文中注入(inject)

另一种可能性是 Inject in $root & context