Question

我刚刚开始并完成了Vue指南。我对ES6的进口和出口有一些基本的把握，但想知道这样做的理想方式。

我将有几个需要原始单一数据源的组件，我需要从那里单独操作。理想情况下，我希望数据位于单独的文件中，以便其他人可以操作它。

我可以通过jquery（见下文）来解决这个问题，但我不需要进行调用，因为json文件将是内部的：

module.exports = {
data: function () {
    return {
        msg: 'hello',
        whatever : 'hi'
    }
},
created : function() {
    this.fetchData();
},
methods : {
    fetchData : function() {
        console.log("WORKING");
        var self = this;
        $.get( apiURL, function( data ) {
                self.items = data;
                console.log(data);
        });
    }
}

}

但我也不想让所有数据都在App.vue文件中。我需要它在其他地方，然后需要它来替换我的数据。

最好的方法是创建另一个没有模板或样式的Vue文件，只创建它自己的module.exports数据对象？说mydata.vue：

module.exports = {
data: function () {
    _mydata = {
        items : [
            {case:'caseone'},
            {case:'casetwo'}
        ],
        otheritems : [
            {case:'caseone'},
            {case:'casetwo'}
        ]
    }
}

}

然后以某种方式将mydata.vue中的这个数据对象替换为app.vue中带有导入的数据对象（main .js）？

import Vue from 'vue'
import App from './App.vue'
import Data from './SiteData.vue'

只是想检查这是否是理想的方式/我在正确的道路上......或者是否有更简单的方法在我的所有组件的不同文件中使用中央数据对象？

Answer 1

我所做的是在json文件中管理我的数据。我认为对于小型应用来说，使用单独文件获取初始数据的方法很酷。更大的应用程序需要更有用的东西，比如Vuex。

我认为管理.vue文件不是一个好主意，因为这些文件是由一些模块发布的系统处理的，具有对应的vue转换，而不是数据对象。

我的方法是：我有一个data.json文件

<强> data.json

{
  "component1": {
    "someData": "someValue",
    ...
  }, 
  ...
  "componentN": {
    "someOtherData": "someOtherValue"
  }
}

然后我将数据导入相应的组件

<强> componentN.vue

<template>
</template>
<script>
import { componentN } from './data.json'

export default {
  data () {
    return componentN
  }
}
</script>

请注意：

我使用单个文件来管理数据，例如，您可以将其拆分为每个组件的文件。
正如您所看到的，这种方法可能会成为中型应用程序的混乱，我不想在大型应用程序中想象它，所以要小心。

Vue js外部数据对象

1 个答案: