Question

我有一个Vue组件，可以在mounted()中完成许多复杂的任务。这些任务包括例如初始化Bootstrap Date Pickers，Time Pickers和Typeaheads。

目前，所有这些初始化代码都在我的mounted()方法中。为了理解发生了什么，开发人员必须阅读代码注释。

理想情况下，我会将代码段移动到自己的方法中，并且只在mounted()中进行方法调用，例如：

mounted () {
  this.helpers.initDatePickers();
  this.helpers.initTimePickers();
  this.helpers.initTypeaheads();
}

我怎样才能做到这一点？我意识到我可以将它们放在methods对象中，但我更愿意将其留给可以通过模板中的声明访问的方法。

请注意，我不是在询问如何跨组件（或全局）共享帮助程序功能。我只是想问如何在自己的空间中创建局部函数，以便清理更长的方法。

Answer 1

您可以创建一个具有通用初始化的mixin模块。

// DatePickerMixin.js
import whatever from 'specific-date-picker-stuff';

export default {
  methods: {
    initDatePickers() {
      // initialization here
    }
  }
}

然后你的组件只使用mixin模块。

<script>
import DatePickerMixin from './mixins/DatePickerMixin';
import TimePickersMixin from './mixins/TimePickersMixin';

export default {
  mixins: [
    DatePickerMixin,
    TimePickersMixin
  ],
  data() {/* ... */},
  // etc.
}
</script>

你可以将所有这些包装在同一个mixin中。

如果你不想总是设置混音，那就global mixin。

import DatePickerMixin from './mixins/DatePickerMixin';

Vue.mixin(DatePickerMixin);

稀疏小心地使用全局mixins，因为它会影响每一个创建单个Vue实例，包括第三方组件。

Answer 2

正如@EmileBergeron所说，mixins是一个很好的解决方案。你也可以创建插件，这恰好也包含了mixin，但还有更多。它们允许您扩展Vue构造函数或将实例/方法直接添加到Vue原型。

Timer accuracy in java

MyPlugin.install = function (Vue, options) {
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // something logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // something logic ...
  }
}

使用您的插件是通过以下方式完成的：

// calls `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

// pass options to your plugin
Vue.use(MyPlugin, { someOption: true })

这是一个小插件我回收了pluralize库中的各种字符串函数：

import {plural, singular, camelCase} from 'pluralize'
PluralizePlugin.install = function (Vue, options) {
    Vue.plural = plural
    Vue.singular = singular
    Vue.camelCase = camelCase
}

有了它，您可以在整个组件中使用this.singular(str)，this.plural(str)等。非常简单但方便。

如何创建本地帮助程序以整理Vue组件

2 个答案: