2016-07-07 6 views
2

私はちょうど出発し、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を言う:

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

}

そして何とか輸入とapp.vueのデータオブジェクトとmydata.vueでこのデータオブジェクトを置き換える(メインJS。)?これは理想的な方法だった場合

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

はちょうど私は正しい道によ...または/チェックしたいすべての私のコンポーネントの異なるファイル内の中央データオブジェクトを持ってする簡単な方法がある場合は?

+0

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

答えて

1

私が行ったことは、jsonファイルで自分のデータを管理することです。私は、最初のデータのために別々のファイルを使用するというアプローチは、小さなアプリではクールだと思います。より大きなアプリケーションには、Vuexのようなもっと便利なものが必要です。

.vueファイルを管理することをお勧めしません。これらのファイルは、データオブジェクトの場合ではなく、互換性のあるバージョン変換で、一部のモジュールのバウンドシステムで処理されるためです。

私のアプローチは、このでした:私はインポート

data.json

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

そしてdata.jsonファイルを持っていた対応するコンポーネントのデータ

componentN.vue

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

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

こと注:私は、しかし、あなたは、たとえば、すべてのコンポーネントのファイルに分割することができます管理するデータのための1つのファイルを使用

  • ご覧のとおり、このアプローチは中規模のアプリでは混乱する可能性があります。大きなアプリでも想像したくないので注意してください。