將JSON響應映射到Vue.js中的模型類

當涉及將JSON API響應映射到「真實」javascript模型對象時，Vue.js是否存在最佳實踐或事實上的庫？來自iOS開發部門的優秀圖書館如JSONModel和MagicalRecord恰好涉及這一問題。將JSON響應映射到Vue.js中的模型類

大多數Vue.js教程/例子我可以發現，似乎只適用於普通的JSON響應。恕我直言，這真的很快很麻煩。例如，當處理像日期字符串這樣的原始數據時，它可能更好的是作爲真正的Date對象。所以它涉及某種（德）序列化功能。此外，如果有諸如Foo.findAll(),Foo.findById(1)或foo.save()之類的內容可以創建對後端服務的適當調用，那就太好了。

我發現vue-model看起來很有希望，但它似乎沒有太多的牽引力。這讓我想知道，如果將JSON映射到對象並不是很多人在他們的SPA中做的事情？什麼是替代方法？

來源

2017-08-29 Tobi Kremer

我正在努力解決同一個問題。我發現了一個替代模型--Redx，請參閱https://stackoverflow.com/questions/38445006/redux-state-as-array-of-objects-vs-object-keyed-by-id –

這不是一個普遍的做法。在基於瀏覽器的SPA中使用JSON的美妙之處在於解析的JSON 是 javascript。您不必將值映射到類型化的類。

這就是說，我理解你的觀點，並且在某些時候我已經構建了一個JavaScript類，其構造函數接受一個JavaScript對象作爲「初始化程序」。然後在API響應中，您可以將響應映射到通過方法，日期屬性等將原始對象轉換爲「類」實例。

比方說，我有一個動物JavaScript類。

class Animal { 
    constructor(initializer){ 
    this.name = initializer.name 
    this.born = new Date(initializer.born) 
    } 

    sayMyName(){ 
    console.log(this.name) 
    } 
}

在API響應中，從響應中生成Animal實例非常簡單。

getAnimals() 
    .then(response => this.animals = response.data.map(a => new Animal(a)))

現在你的動物數據屬性在Vue中有一個Animal對象的集合。

來源

2017-08-29 15:51:26 Bert

我希望那裏會無需手動編寫各種重複樣板即可成爲交鑰匙解決方案。此外，您的解決方案僅解決（德）序列化問題。我仍然需要手動與服務器後端通信，以獲取，更新，保存等資源。不過謝謝你讓我知道這或多或少是最好的做法！ :) –

sayMyName方法將無法使用，因爲vue僅適用於受歡迎的對象 –

@AlekseyRazbakov除了事實如此。 https://codepen.io/Kradek/pen/ZXRYvG?editors=1010 – Bert

將JSON響應映射到Vue.js中的模型類

回答

相關問題