Глобальный vue объект не определен

Question

Сначала я хочу повторно использовать мой валидатор на другом компоненте, поэтому я пишу его на myValidator. js. Я установил объект vue в окно. Потому что мне нужен i18n на моем myValidator. js. И я получил это неопределенное сообщение. Но другой мой компонент - это работа. Мне нужна ваша помощь. Спасибо.

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

myValidator. js

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')
}]

боковая панель / указатель. vue

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

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

Поиск заголовка / указатель. vue

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

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

Answer 1

Причина в том, что window.vm устанавливается только на vm после приложения смонтировано.

В то время как объявление data () в HeaderSearch / Index. vue выполнено до приложения смонтировано.

Таким образом, для этого наиболее элегантным решением является то, которое вы нашли в вашем комментарии, и я действительно поддерживаю это: https://github.com/kazupon/vue-i18n/issues/149#issuecomment -357455921

Однако, если вы хотите убедиться и поиграть с vue жизненным циклом, вы можете попытаться сохранить прежнюю код и вместо этого делать это в HeaderSearch / index. vue

<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     
}
...
}