无法从 main.js 文件外部访问 VueJs 实例变量

Question

我有一个保存为配置文件的国家/地区列表 country_list。该文件包含以下内容。

    export default {
      countries: [
        'AUSTRALIA',
        'AUSTRIA',
        'BELGIUM',
        'BRAZIL',
        'BULGARIA',
        'CANADA',
        'CHINA',
        'CROATIA',
        'CYPRUS',
        'CZECHIA',
        'DENMARK',
        'ESTONIA',
        'FINLAND'
    ]
}

现在在 main.js 文件中导入它并将其设置为实例变量

import countryList from './config/country_list';

Vue.prototype['$countryData'] = countryList;

现在我正尝试访问名为 utils.js 的文件中的变量 $countries，如下所示：

export const checkCountryIncluded = (country) => {

    const countries = this.$countryData.countries;
    
    return countries.includes(country);
}

并且此 checkCountryIncluded 是从组件调用的。

但是这里我得到一个错误Uncaught TypeError: Cannot read property 'countries' of undefined

我是 VueJS 的新手，如果有人能指出这里缺少的内容，那将会很有帮助。

Answer 1

在像 utils 这样的分离文件中，vue 实例不可用，它只在组件层次结构中可用，解决方案是在调用实用程序函数时将全局数据作为参数传递：

this.isCountryIncluded = checkCountryIncluded(this.$countryData,this.country)

utils.js :

export const checkCountryIncluded = (countryData,country) => {

    const countries = countryData.countries;
    
    return countries.includes(country);
}

Answer 2

您可以使用组件上下文调用 checkCountryIncluded 。

this.isCountryIncluded = checkCountryIncluded.apply(this, [this.country])

为此，该函数应为普通函数（非箭头函数），因为您无法更改箭头函数的上下文。

export const checkCountryIncluded = function(country) {

    const countries = this.$countryData.countries;
    
    return countries.includes(country);
}

无法从 main.js 文件外部访问 VueJs 实例变量

Cannot access VueJs instance variable from outside main.js file

javascript

vue.js

vue-component