vue.js - Vuejs - 如何从另一个 Js 文件调用 main.js 的挂载函数

Question

这是我在 commonValidation.js 中给出的代码。

commonValidation.js：

this.$validator.localize('en', {
      messages: {
        required: (field) => '* ' + field + ' is required'
      },
      attributes: {
        email: 'Email'
      } 
    })

我想在下面的挂载函数中调用 main.js 中的上述文件。但它不起作用。如果我在mounted()(in main.js) 方法中给出了这些验证（来自commonValidation.js），它就可以工作。

主.js：

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import commonValidation from './commonValidation'

Vue.use(VeeValidate);
Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  },
  mounted()
  {
    commonValidation
  }
})

请帮我在 main.js 中的 mounted() 中调用 commonValidation.Js。提前致谢。

这是我完整的 commonValidation.js

export default {
  mounted() {
    this.$validator.localize('en', {
      messages: {
        required: (field) => '* ' + field + ' is required'
      },
      attributes: {
        email: 'Email'
      } 
    })
  }
}

Answer 1

您正在 commonValidation.js 文件中导出一个对象。不能像函数一样调用对象。

我认为您的意图是使用mixin。mixin 只不过是一个包含可重用组件选项作为其属性的对象。

因此，只需在 main.js 文件的根组件上注册 mixin：

//main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import commonValidation from './commonValidation'

Vue.use(VeeValidate);
Vue.use(BootstrapVue);

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
        App
    },
    mixins : [commonValidation]
}