如何在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

---

当您使用 console.log 显示现有的导入时，会显示什么内容？如果我没记错的话，当您需要一个 .vue 组件时，生成的数据属性可以作为静态引用访问，通常在类似于 logs.data().logs 的东西中。 - li x

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;

组件.vue

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

- Abhishek Gupta

---

这实际上并没有回答楼主的帖子。 - li x

更新了答案。 - Abhishek Gupta

如果我需要在数组中使用“this”来获取翻译，我该如何进行？ - Sven Delueg

@delueg可以给我一个例子吗？我不太明白你打算如何在数组内部使用“this”。 - Abhishek Gupta

你必须在两个文件中坚持使用 data 或 logs 中的一个。 - untill

Answer 2

说明

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

由于Webpack在导入Vue模板文件（例如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();
  }
};

在线示例

外部资源

请参阅《关于关注点分离(SoC)的问题》

- Amin NAIRI

---

这就是我在评论中提到的内容，通常你会这样导入来自 .vue 组件的外部数据。 - li x

Answer 3

我个人是这样做的：

data.js

export default {
  Variables...
}

WebPage.vue

import { default as data } from "./data";
export defaut{
 data(){
  return data;
 }
}

- eberlast