在導入的對象中訪問VM

Question

具有這樣的組件：

import { someData } from 'someData.js'

export default {
    data() {
        return {
            foo: 'bar',
            someData: someData
        }
    }
}

someData.js：

export const someData = {
    someObject: {
        test: this.foo // How can I access foo from the component, where this object is imported from? This is not accessable.
    },
}

如何在someData.js中訪問this.foo？

Answer 1

您可以改為導出函數，並將值作為參數傳遞：

import { getSomeData } from 'someData.js'

export default {
    data() {
        return {
            foo: 'bar',
            someData: getSomeData('bar')
        }
    }
}

someData.js

export const getSomeData = foo => ({
    someObject: {
        test: foo
    },
})

Answer 2

這是不可能的， someData對象是在調用data()方法之前構造的。 您還需要使其成為一個函數，並接受foo作為參數：

export function makeSomeData(foo) {
    return {
        someObject: {
            test: foo
        },
    };
}

import { makeSomeData } from 'someData.js'

export default {
    data() {
        return {
            foo: 'bar',
            someData: makeSomeData(this.foo)
        }
    }
}

這仍然不能與對象文字聲明中的Self-references一起使用 。 您將需要使其成為一個getter函數，或者在使用foo屬性構造該對象之后調用它：

export default {
    data() {
        var obj = {
            foo: 'bar',
        };
        obj.someData = makeSomeData(obj.foo);
        return obj;
    }
}