如何从 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
    }
}

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

非常感谢。

原文由 Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

数据.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;

组件.vue

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

原文由 Abhishek Gupta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

说明

如果您使用的是 Vue 模板文件，则可以像通常在 HTML 页面中使用任何其他脚本一样使用脚本标签 src 的属性。

由于当您导入 Vue 模板文件时 Webpack 正在做一些特殊的事情，例如 example.vue ，您必须展开配置以提取 JavaScript 部分，这不应该由 vue-loader 编译 --- 。

例子

index.vue

 <template><!-- ... --></template>
<script src='index.js'></script>
<style scoped>/* ... */</style>

index.js

 export default {
  data() {
    return {
      //...
    };
  }
};

something.js

 import stuff from '../stuff/index.js';

export default {
  data() {
    return ...stuff.data();
  }
};

在线示例

外部资源

查看 关注点分离

原文由 Amin NAIRI 发布，翻译遵循 CC BY-SA 4.0 许可协议