javascript #NUXT.JS 中常见组件方法的存储位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48088798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where to store common component methods in #NUXT.JS
提问by J.Doe
Actually i want to know where to store common components methods in #NUXT.JS.
实际上我想知道在#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)
}
回答by Soleno
I go for mixinslike with plain vue.js. Only difference - for global mixins - I include them as a plugin, but first:
我去混入像使用普通vue.js. 唯一的区别 - 对于全局 mixins - 我将它们作为插件包含在内，但首先：
Non global mixins
非全局混合
I would create an extra folder for my mixins. For example in a /mixins/testMixin.js
我会为我的 mixins 创建一个额外的文件夹。例如在一个/mixins/testMixin.js
export default {
methods: {
aCommonMethod () {}
}
}
Then import in a layout, page or component and add it via the mixins object:
然后导入布局、页面或组件并通过 mixins 对象添加它：
<script>
import commonMixin from '~/mixins/testMixin.js
export default {
mixins: [commonMixin]
}
</script>
Global mixins
全局混合
For example in a new file plugins/mixinCommonMethods.js:
例如在一个新文件中plugins/mixinCommonMethods.js：
import Vue from 'vue'
Vue.mixin({
methods: {
aCommonMethod () {}
}
})
Include that file then in nuxt.config.js
包含该文件，然后在 nuxt.config.js
plugins: ['~/plugins/mixinCommonMethods']
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:
之后，您将在任何地方都可以使用该方法并在那里使用this.commonMethod(). 但是这里有一个来自vue.js 文档的建议：
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.
少而小心地使用全局 mixins，因为它会影响创建的每个 Vue 实例，包括第三方组件。在大多数情况下，您应该只将它用于自定义选项处理，如上例所示。将它们作为插件发送以避免重复应用程序也是一个好主意。
Inject in $root & context
在 $root 和上下文中注入
Another possibility would be to Inject in $root & context
另一种可能性是在 $root & context 中注入
