Saya menyetel instance vue pada jendela di main.js saya seperti ini:

window.todoEventBus = new Vue()

Di dalam komponen saya, saya mencoba mengakses objek global todoEventBus ini seperti ini:

created() {
    todoEventBus.$on('pluralise', this.handlePluralise);
},

Tetapi saya mendapatkan kesalahan dengan mengatakan:

Failed to compile.

./src/components/TodoItem.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: 'todoEventBus' is not defined (no-undef) at src\components\TodoItem.vue:57:9:
  55 | 
  56 |     created() {
> 57 |         todoEventBus.$on('pluralise', this.handlePluralise);
     |         ^
  58 |     },
  59 | 
  60 |     methods: {


1 error found.

Namun jika saya console.log todoEventBus saya melihat objek vue.

File package.json saya terlihat seperti ini.

{
  "name": "todo-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.3.2",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.23.1",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}
3
Jethro Hazelhurst 27 Oktober 2019, 15:27

2 jawaban

Jawaban Terbaik

Kesalahan ini berasal dari aturan no-undef. Eslint akan memunculkan kesalahan ini ketika variabel tidak didefinisikan dalam ruang lingkup dan itu bukan global yang diketahui (seperti Promise, document, dll...).

Anda dapat mendeklarasikan variabel Anda sebagai global dengan memberikan komentar di file yang ingin Anda gunakan seperti ini:

/* global todoEventBus */

Atau Anda bisa mendeklarasikannya sebagai global di konfigurasi eslint Anda

"eslintConfig": {
    "globals": {
        "todoEventBus": "readable"
    }
}
11
Alex Michailidis 13 Juli 2020, 09:28

Mengubah jawaban Alex, Anda juga dapat mempersempit aturan ke Vue SFC secara khusus:

// .eslintrc.js

module.exports = {
    ...
    overrides: [
        {
            files: "*.vue",
            globals: {
                todoEventBus: "readable",
            },
        },
    ],
}
0
Ilya Semenov 13 Juli 2020, 06:16