如何从Vue.js中的外部文件访问数据？

Question

Vue.js仍然是新手，但非常乐于学习。在开始使用Axios和Vuex存储之前，我想了解如何将一些测试数据从单独的文件发送到我的组件？希望有人能帮忙。

如果我在我的组件中执行此操作，那么它将起作用：

<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' }
            ]
        }
    }
}

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

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

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

<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
    }
}

有谁能告诉我我在做什么错？为什么不能将我的数据放入单独的文件中？

非常感谢。

Answer 1

导入任何文件时，webpack都会使用适当的loader（在中指定webpack.config.js）来构建文件。如果它是.vue文件，则用于vue-loader构建文件并返回Vue组件。您需要一个包含数据而不是vue组件的数组。您可以为此导入简单文件.js和.json文件。

而不是导入.vue文件。您可以导入.json或.js归档。

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
        }
    }
}