Vue.js 全局vue对象未定义

首先，我想在另一个组件上重用我的验证器，所以我将它写在myValidator.js上。 我将vue对象设置为window。因为我需要我的myValidator.js上的i18n。我得到了这个未定义的信息。但我的另一部分是工作。我需要你的帮助。谢谢

Uncaught TypeError: Cannot read property '$t' of undefined
    at Object../src/myValidator.js (VM406 app.js:156668)
    at __webpack_require__ (VM406 app.js:724)
    at fn (VM406 app.js:101)
    at Object../node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/HeaderSearch/index.vue?vue&type=script&lang=js& (VM406 app.js:4187)
    at __webpack_require__ (VM406 app.js:724)
    at fn (VM406 app.js:101)
    at Module../src/components/HeaderSearch/index.vue?vue&type=script&lang=js& (VM406 app.js:157451)
    at __webpack_require__ (VM406 app.js:724)
    at fn (VM406 app.js:101)
    at Module../src/components/HeaderSearch/index.vue (VM406 app.js:157394)

main.js

var vm = new Vue({
  el: '#app',
  data() {
    return {
      bus: eventBus
    }
  },
  router,
  store,
  i18n,
  render: h => h(App)
})
window.vm = vm

export const accountValidatorRule = [{
  required: true,
  message: window.vm.$t('valid.accountBlank'), <-- this $t is undefined
  trigger: 'change'
}, {
  min: 6,
  max: 16,
  message: window.vm.$t('valid.accountRule')
}]

myValidator.js

var vm = new Vue({
  el: '#app',
  data() {
    return {
      bus: eventBus
    }
  },
  router,
  store,
  i18n,
  render: h => h(App)
})
window.vm = vm

export const accountValidatorRule = [{
  required: true,
  message: window.vm.$t('valid.accountBlank'), <-- this $t is undefined
  trigger: 'change'
}, {
  min: 6,
  max: 16,
  message: window.vm.$t('valid.accountRule')
}]

导出常量accountValidatorRule=[{
要求：正确，
消息：window.vm.$t（'valid.accountBlank'），原因是
window.vm
仅在安装应用程序后设置为
vm

然而，HeaderSearch/Index.vue中的数据（）的声明是在安装应用程序之前完成的

因此，为了做到这一点，最优雅的解决方案是您在评论中找到的解决方案，我非常支持这样做：

但是，如果您想确保并使用vue生命周期，您可以尝试保留旧代码，而不是在HeaderSearch/index.vue中执行此操作

<template>
  <div>
    <search ...> <-- this line
  </div>
</template>
<script>
import Search from '@/components/HeaderSearch'
...

export default {
  name: 'Index',
  components: { Logo, Search, Menu },
...
</script>

<script>
import * as myValidator from '@/myValidator'  <-- this line

export default {
  name: 'Index',
  data() {
    return {
      rules: {
        search: myValidator.accountValidatorRule <-- this line
      },
...
}

<script>
import * as myValidator from '@/myValidator'  <-- this line

export default {
  name: 'Index',
  data() {
    return {
      rules: {
        search: null <-- assign to nothing first
      },
mounted() {
  // update it after mounted:
    this.rules.search = myValidator.accountValidatorRule <--- the window.vm should be ready now     
}
...
}


从“@/myValidator”导入*作为myValidator我找到了这个解决方案，但我仍然对此感到好奇。