ecmascript-6 - Vue js 外部数据对象

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>

注意:

• 我使用单个文件来管理数据，但是您可以将它拆分为每个组件的文件，例如。
• 如您所见，这种方法可能会在中型应用中变得一团糟，我什至不想在大型应用中想象它，所以要小心。