Vue js外部数据对象

我刚刚开始并已经通过Vue指南。我对ES6的进口和出口有一些基本的把握，但是想知道这样做的理想方式。Vue js外部数据对象

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

我可以计算出通过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：（主JS）

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

}

然后以某种方式与数据对象拥有进口替代这个数据对象mydata.vue在app.vue？

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

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

来源

2016-07-07 pwhitt

https://vuejs.org/guide/application.html#State-Management – Celeo

我所做的是在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>

需要注意的是：

我用一个单一的文件进行管理的数据，但是你可以在每个组件文件分割它，例如。
正如你所看到的，这种方法可能会变得与中等应用程序混乱，我甚至不想在大应用程序中想象它，所以要小心。

来源

2016-07-07 19:32:19

Vue js外部数据对象

回答

相关问题