मैं अपने main.js
में विंडो पर इस तरह एक Vue उदाहरण सेट कर रहा हूं:
window.todoEventBus = new Vue()
मेरे घटकों के अंदर मैं इस तरह इस todoEventBus वैश्विक वस्तु तक पहुँचने की कोशिश कर रहा हूँ:
created() {
todoEventBus.$on('pluralise', this.handlePluralise);
},
लेकिन मुझे यह कहते हुए त्रुटियां हो रही हैं:
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.
हालांकि अगर मैं todoEventBus कंसोल.लॉग करता हूं तो मुझे vue ऑब्जेक्ट दिखाई देता है।
मेरी package.json फ़ाइल इस तरह दिखती है।
{
"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"
]
}
2 जवाब
यह त्रुटि नियम no-undef से आती है। एस्लिंट इस त्रुटि को तब फेंक देगा जब एक चर को दायरे में परिभाषित नहीं किया गया है और यह एक ज्ञात वैश्विक नहीं है (जैसे Promise
, document
, आदि...)।
आप जिस फ़ाइल का उपयोग करना चाहते हैं उसमें एक टिप्पणी डालकर आप अपने चर को वैश्विक घोषित कर सकते हैं:
/* global todoEventBus */
या आप इसे अपने एस्लिंट कॉन्फ़िगरेशन में वैश्विक घोषित कर सकते हैं
"eslintConfig": {
"globals": {
"todoEventBus": "readable"
}
}
एलेक्स के उत्तर में संशोधन करते हुए, आप विशेष रूप से Vue SFC के नियमों को भी सीमित कर सकते हैं:
// .eslintrc.js
module.exports = {
...
overrides: [
{
files: "*.vue",
globals: {
todoEventBus: "readable",
},
},
],
}