如何从 Vue.js 中的外部文件访问数据? [英] How do I access data from an external file in Vue.js?

问题描述

对 Vue.js 还是个新手，但非常喜欢学习它.在开始使用 Axios 和 Vuex 商店之前，我想了解如何将一些测试数据从单独的文件发送到我的组件?希望有人能帮忙.

Still new to Vue.js, but very much enjoying to learn about it. Before I get to using Axios and Vuex store I'd like to understand how can I send some test data from a separate file to my component? Hope someone can help.

如果我在我的组件中执行此操作:

If I do this within my component it works:

<script>

export default {
    data () {
        return {
        logItems: [
            { log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
            { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
            { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
            { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
            ]
        }
    }
}

但我假设我可以从外部文件中按如下方式导入它:

But I assumed I could import it as follows from an external file:

import logs from '~/components/testdata.vue'
export default {
    data () {
        return {
        logitems: logs
        }
    }
}

在我的 testdate.vue 文件中，我有:

And in my testdate.vue file I have:

<script>
export default {
    data () {
        return {

        // Dummy Test Data
        logs: [
            { log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
            { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
            { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
            { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
            ]
        }
        return logs
    }
}

有人能告诉我我做错了什么以及为什么将我的数据放入单独的文件不起作用吗?

Is anyone able to tell me what am I doing wrong and why putting my data into a separate file doesn't work, please?

非常感谢.

推荐答案

当你导入任何文件时，webpack 使用合适的 loader(在你的 webpack.config.js) 来构建文件.如果它是一个 .vue 文件，它使用 vue-loader 来构建文件并返回一个 Vue 组件.您需要一个包含数据的数组，而不是 vue 组件.您可以为此导入简单的 .js 和 .json 文件.

When you import any file, webpack uses an appropriate loader (specified in your webpack.config.js) to build the file. In case it is a .vue file, it uses vue-loader to build the file and return a Vue component. You need an Array containing your data, not a vue component. You can import simple .js and .json files for this.

而不是导入 .vue 文件.你可以只导入 .json 或 .js 文件.

Instead of importing a .vue file. you can just import .json or .js file.

data.js

const data = [{ log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
            { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
            { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
            { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
            ]
export default data;

component.vue

import logs from 'data.js'
export default {
    data () {
        return {
        logitems: logs
        }
    }
}

这篇关于如何从 Vue.js 中的外部文件访问数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！