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

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();
  }
};

在线示例

外部资源

请参阅What-About-Separation-of-Concerns

Answer 3

我个人通过以下方式进行操作：

  

data.js

export default {
  Variables...
}

  

WebPage.vue

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