Vue.js

Question

bir global veri yapısı Vue.js. ile tek bir sayfa uygulaması yapıyorum Bu genişletilmiş, görüşlü bir elektronik tablo gibi daha basit bir uygulama. Uygulamanın farklı görünümlerini ele almak için vue-router kullanıyorum, bazıları yeni veri girmek için kullanılır, bazıları veriler üzerinde hesaplamalar yapmak için kullanılır, ancak tüm veriler iç içe geçmiştir (veri # 1 görünümünde girilen veriler görünümde veri girmek için kullanılır) # 2 ve sonra her ikisi de # 3 numaralı resimde bir şeyi hesaplamak için kullanılır.

Küresel bir veri yapısına ihtiyacım var demektir. Araştırmamdan, aşağıdakileri yapabilmem için birkaç seçeneğim olduğunu fark ettim:

• "uygun" yol: bileşenleri olayları yayma ve bunları üst öğede işleme; Ben $parent.$data
• benim şimdiki çözüm vasıtasıyla bileşen şablonlar doğrudan ana kapsamını erişen
• elde etmek istediğinizi veri böylece gibi

nesne çocuğa ebeveyn veri gönderim atamak için biraz overcomplicated görünüyor:

const REPORTS = { 
    template: templates.reports, 
    data: function(){ 
    return this.$parent.$data 
    } 
}; 

Ancak, altıncı hissim bana iyi bir uygulama olmadığını söylüyor.

Eğer haklıysam, bunu başarmanın daha iyi yolları nelerdir: tüm bileşenlerden erişilebilir bir, global veri yapısı?

Answer 1

dokümanlar gibi central state management diyor ne arıyorsun edilir:

Büyük uygulamalar nedeniyle genellikle birçok bileşenleri ve aralarındaki etkileşimleri dağılmış halde birden parçalara, karmaşıklık içinde büyüyebilir. Bu sorunu çözmek için Vue, vuex'u sunar: Elm'den ilham alan devlet yönetim kitaplığımız. Zaman yolculuğuna sıfır kurulum erişimi sağlayan vue-devtools ile bütünleşir.

Sen benim diğer yanıtlara bir göz atabilirsiniz here ve here

Vuexstate eşzamanlı mutations kullanılarak güncellenen getters aracılığıyla okunan tüm vue bileşenlerinden actions yoluyla eşzamansız güncellenir ve hatta farklı modules ayrılabilir .