#NUXT.JS 中常见组件方法的存储位置 [英] Where to store common component methods in #NUXT.JS

问题描述

实际上我想知道在#NUXT.JS 中将常用组件方法存储在哪里.

Actually i want to know where to store common components methods in #NUXT.JS.

我尝试过的东西.--> 在中间件中存储通用代码(它没用)，因为根据我的知识中间件只能处理对服务器的请求和响应.

things which i have tried. --> Storing common code in middleware (its use-less) because according to my knowledge middleware is only capable of handling request and response to server.

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

推荐答案

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

I go for mixins like with plain vue.js. Only difference - for global mixins - I include them as a plugin, but first:

我会为我的 mixins 创建一个额外的文件夹.例如在 /mixins/testMixin.js

I would create an extra folder for my mixins. For example in a /mixins/testMixin.js

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

然后在布局、页面或组件中导入并通过 mixins 对象添加它:

Then import in a layout, page or component and add it via the mixins object:

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

例如在一个新文件 plugins/mixinCommonMethods.js 中:

For example in a new file plugins/mixinCommonMethods.js:

import Vue from 'vue'

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

将该文件包含在 nuxt.config.js

plugins: ['~/plugins/mixinCommonMethods']

之后，您将在任何地方都可以使用该方法，并使用 this.commonMethod() 在那里调用它.但这里有来自 vue.js 文档的建议:

After that you would have the method everywhere available and call it there with this.commonMethod(). But here an advice from the vue.js docs:

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

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 &上下文

Another possibility would be to Inject in $root & context

这篇关于#NUXT.JS 中常见组件方法的存储位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！