无法从main.js文件外部访问vuejs示例变量

zxlwwiss  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(381)

我有一个保存为配置文件的国家/地区列表 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;

现在我尝试访问这个变量 $countries 在一个名为 utils.js 例如:

export const checkCountryIncluded = (country) => {

    const countries = this.$countryData.countries;

    return countries.includes(country);
}

还有这个 checkCountryIncluded 从组件调用。
但这里我得到了一个错误 Uncaught TypeError: Cannot read property 'countries' of undefined 我是vuejs的新手,如果有人能指出这里缺少什么,这将非常有帮助。

ldioqlga

ldioqlga1#

在单独的文件(如UTIL)中,vue示例不可用,它仅在组件层次结构中可用,解决方案是在调用实用程序函数时将该全局数据作为参数传递:

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

utils.js:

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

    const countries = countryData.countries;

    return countries.includes(country);
}
dzhpxtsq

dzhpxtsq2#

你可以打电话 checkCountryIncluded 使用组件上下文。

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

要使其正常工作,函数应为普通函数(非箭头),因为您无法更改箭头函数的上下文。

export const checkCountryIncluded = function(country) {

    const countries = this.$countryData.countries;

    return countries.includes(country);
}

相关问题