Question

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

2021-07-09

251

javascript vue.js vue-component

我有一个国家列表，保存为配置文件 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);
}