Main.js memiliki kode ini

window.l = function () { }
try {
  window.l = console.log.bind(console)
} catch (e) { }

Yang berfungsi di aplikasi non-Vue. Namun, saat menelepon

l("test")

Dari tindakan/metode Vue, ia mengeluh bahwa itu tidak ditentukan.

Bagaimana itu bisa bekerja?

Alasan: perlu mengeluarkan beberapa data debug, dengan mengetik sesedikit mungkin.

3
Marius 7 Agustus 2017, 15:36

2 jawaban

Jawaban Terbaik

Saat Anda ingin menambahkan fungsionalitas tingkat global ke Vue, Anda biasanya harus menggunakan mixin atau plugin.

Untuk contoh berikutnya, saya berasumsi Anda menggunakan vue-cli dengan template webpack yang lengkap. Selain itu, kami akan menggunakan App.vue sebagai referensi praktis, tetapi Anda dapat menerapkan prinsip yang sama ke komponen lain...


Campuran

Buat mixin bernama log.js (dalam folder mixins ) dengan kode berikut:

export default {
  methods: {
    l (...args) { // rest parameters
      console.log(...args) // spread operator
    }
  }
}

Buka App.vue, impor mixin Anda dan gunakan:

<script>
  import log from './mixins/log'

  export default {
    name: 'app',
    mixins: [log],
    created () {
      this.l('Foo', 'Bar') // Foo Bar
    }
  }
</script>

Plugin

Buat plugin bernama log.js (dalam folder plugins) dengan kode berikut:

export default {
  install (Vue, options) {
    Vue.prototype.$l = console.log.bind(console)
    Vue.l = console.log.bind(console)
  }
}

Buka main.js Anda dan nyatakan plugin global Anda:

import log from './plugins/log'
Vue.use(log)

Buka App.vue, impor Vue dan gunakan plugin Anda:

<script>
  import Vue from 'vue'

  export default {
    name: 'app',
    created () {
      this.$l('Foo') // Foo
      Vue.l('Bar') // Bar
    }
  }
</script>

Anda mungkin berkata: "Hei, mengapa saya harus menulis this atau Vue? Saya hanya ingin menulis l, itu saja!". Yah... Ini sebenarnya bagaimana Vue telah dirancang. Untuk menyediakan fungsionalitas global (digunakan bersama oleh semua komponen), Anda harus menambahkan properti statis ke objek Vue atau prototipe properti (Vue.prototype ) yang dapat diakses melalui this dalam instance Vue.


EDIT

Saya baru saja memikirkan solusi alternatif ...

Anda dapat mengedit index.html Anda untuk menambahkan ini:

<script>
  var l = console.log.bind(console)
</script>

Kemudian, untuk menghindari kesalahan ESLint, Anda juga harus mengedit file .eslintrc.js untuk mereferensikan variabel global baru Anda:

globals: {
  l: true
}

Filenya terlihat seperti ini:

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  globals: {
    l: true
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

Mulai ulang server dev Anda. Sekarang Anda seharusnya dapat menggunakan l dalam kode Anda:

<script>
  export default {
    name: 'app',
    created () {
      l('It works!')
    }
  }
</script>
4
Badacadabra 8 Agustus 2017, 16:25

Tetapkan console.log seperti ini.

window.l=console.log;
1
Ajay Dharnappa Poojary 7 Agustus 2017, 12:43