设置实用程序类并在vue组件中使用它

Question

我正在处理的vue应用程序目前有许多与日期函数相关的代码冗余.为了减少这些冗余,我想创建一个如下所示的实用程序类,导入它并将其设置为组件中的Vue数据属性,因此我可以在其中调用日期函数.

我不确定实现这个的最佳方法.当前实现导致错误说明TypeError: this.dates is undefined,我的目标不仅是解决此错误,而且使用最佳标准在Vue环境中创建/利用该类.

导入实用程序类

    import Dates from "./utility/Dates";
...

零件

const contactEditView = Vue.component('contact-edit-view', {
        data() {
            return {
                contact: this.myContact
                dates: Dates
            }
        },
...

Dates.js

export default {
    dateSmall(date) {
        return moment(date).format('L'); 
    },
    dateMedium(date) {
        return moment(date).format('lll');
    },
    dateLarge(date) {
        return moment(date).format('LLL');
    }
};

视图

Date of Birth: {{ dates.dateMedium(contact.dob) }}

Answer 1

我的建议是在Vue中使用插件选项.关于Vue插件

因此,您将创建一个名为services的新文件夹,添加文件yourCustomDateFormater.js:

const dateFormater = {}

dateFormater.install = function (Vue, options) {

   Vue.prototype.$dateSmall = (value) => {
     return moment(date).format('L')
   }

   Vue.prototype.$dateMedium = (value) => {
     return moment(date).format('lll')
   }
}

在main.js中:

import YourCustomDateFormater from './services/yourCustomDateFormater'

Vue.use(YourCustomDateFormater)

你可以在任何地方使用它,如下所示:

this.$dateSmall(yourValue)

或者,如果你想使用mixin.阅读更多关于mixin的信息

创建一个新文件dateFormater.js

export default {
  methods: {
    callMethod () {
      console.log('my method')
    }
  }
}

你的组件:

import dateFormater from '../services/dateFormater'

  export default {
    mixins: [dateFormater],
    mounted () {
      this.callMethod() // Call your function
    }
  }

注:" 使用全球混入稀疏细心,因为这会影响创建的每一个Vue的情况下,包括第三方组件在大多数情况下,你应该只使用它的自定义选项处理像上面的例子证明这也是一个不错的主意.将它们作为插件发送,以避免重复应用. " - Vue文档