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: (. 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' 

Просто хотел, чтобы проверить, было ли это идеальный способ/я нахожусь на правильном пути ... или если есть более простой способ, чтобы иметь центральный объект данных в другой файл для всех моих компонентов?

Answer 1

Что я сделал - это управлять моими данными в json-файле. Я думаю, что подход использования отдельных файлов для исходных данных классный для небольших приложений. Большим приложениям нужно что-то более полезное, например, Vuex.

Я не думаю, что это хорошая идея для управления файлом .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> 

Обратите внимание, что:

• Я использовал один файл для управления данными, однако вы можете разбить его в файл для каждого компонента, например.
• Как вы можете видеть, этот подход может стать беспорядком со средними приложениями, я не хочу даже воображать его в больших приложениях, поэтому будьте осторожны.