javascript - vue2, vuex, einige Zweifel an der Datenschicht und der Controller-Schicht
天蓬老师
天蓬老师 2017-07-03 11:41:41
0
1
751

Die Frage lautet wie folgt, bitte helfen Sie mir, sie zu lösen

Lassen Sie mich zunächst über mein persönliches Verständnis sprechen

  1. Änderungen in der Modellebene werden auf der Ansichtsebene widergespiegelt, und Änderungen in der Ansichtsebene werden auch auf dem Modell widergespiegelt. In der .vue-Datei ist die Modellebene data对象里面的数据(此处假设不存在store仓库) In Vue ist die Ansicht der Inhalt in der Vorlage, das Modell sind die im Datenobjekt vorhandenen Daten und Methoden, die Methoden ähneln, sollten in der Controller-Ebene klassifiziert werden.

  2. Das MVVM-Modell ist noch nicht erschienen. Die meisten Leute schreiben Code nach dem MVC-Modell und schreiben sie, damit der Code klarer aussieht.

  3. vuex ist ein Lagerhaus, das hauptsächlich dazu dient, Kommunikationsprobleme zu lösen, wenn mehrere Komponenten von Vue sowie einige Geschwisterkomponenten einen bestimmten Status teilen. Vuex zu haben bedeutet nicht, dass alle Daten in Vuex gespeichert werden sollten.

Erzählen Sie mir von meinem Problem

data(){
        return {
            userList:[],
            nextSwitch:true, 
            prevSwitch:true,  
            chooseUserId:null,
            linghtboxStatus:false,
            linghtboxImgList:[],
            linghtboxCurImg:'',
            currentPage:1,
            listMaxPage:0
        }
    },
mounted(){
        const _this = this;
            let Listdata = {
                id:this.projectId,
                pagesize:5,
                page:this.currentPage
            }
            this.$store.dispatch('proposalListAc',Listdata).then(function (response) {
                if(response.code === 200) {
                    _this.userList = response.data.list.lists
                    _this.listMaxPage = response.data.list.pages
                    if(_this.listMaxPage > 1) { 
                        _this.nextSwitch = false
                    }
                }
            })
        }
    },
其实这段代码逻辑如下,此处我需要在组件mounted的时候,需要请求一下数据,将一个列表渲染出来,但是我这个列表的数据是这个组件中私有的,所以并不需要存在vuex中去通知其他的组件。store中的代码如下
actions:{
    proposalListAc:function(context,data){
            let promise = new Promise(function(resolve,reject){
                api.getData('proposalList',data).then(function (response) {
                    resolve(response.data);
                })
            })
            return promise
        }
}

Ist es ausgehend von der ursprünglichen Absicht, Ansichten, Daten und Geschäftslogik zu trennen, sinnvoll, den Code auf diese Weise zu strukturieren? Tatsächlich hat diese Liste auch die Funktion „Vorherige Seite“ und „Nächste Seite“. Ich muss die Anforderungsparameter erstellen, um dem Server mitzuteilen, welche Datenseite angefordert wird und wie viele Datenelemente angefordert werden. Funktionalität ist nicht schwierig. Aber mein Kollege sagte, dass Funktionen wie die vorherige Seite und die nächste Seite zur Datenschicht gehören (weil sich die Daten im Wesentlichen geändert haben) und diese Dinge im Speicher abgelegt werden sollten. Aber ich verstehe, dass meine Liste zunächst einmal für diese Komponente privat ist und keinen Status mit anderen Komponenten teilen muss. Daher verteile ich die angeforderten Daten einfach per Dispatch an die Seite und muss die aktuelle Seite berechnen, wenn ich auf die vorherige oder nächste Seite klicke. Diese sollte zur Geschäftslogik (Controller-Schicht) gehören, nicht zur Modellschicht (obwohl die Die letzte Änderung sind immer noch die Daten, aber ich muss Logik anwenden, um zu beurteilen, wie sich die Daten ändern sollen.
Bitte sagen Sie mir, wie ich den Code in dieser Geschäftssituation strukturieren soll. Dies ist sinnvoller und entspricht der ursprünglichen Absicht, Ansichten, Daten und Geschäftslogik zu trennen und den Code eleganter zu gestalten. (Das Projekt ist kein kleines Projekt, daher wurde vuex eingeführt. Dieser Code ist nur ein kleiner Teil. Es sind viele verschiedene Module auf Lager.) Bitte teilen Sie uns alle Ihr Verständnis und Ihre Meinung mit

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

Antworte allen(1)
阿神

你既然都说了是一个私有组件 肯定是内部都是计算好的 何必还要去放在store 统一管理?

你请求数据的api封装了, 直接传递currentPage了就行了啊

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!