問(wèn)題描述

問(wèn)題如下，請(qǐng)大神解惑

先說(shuō)說(shuō)我個(gè)人的理解

model層的變化會(huì)反應(yīng)到view層上，view層的變化也會(huì)反映到model上。而在.vue的文件中，model層就是data對(duì)象里面的數(shù)據(jù)（此處假設(shè)不存在store倉(cāng)庫(kù)），在vue中view就是template里的內(nèi)容，model就是data對(duì)象中存在的數(shù)據(jù)，而類似于methods里面的方法都應(yīng)該歸類在Controller層。

在mvvm這種模式暫未問(wèn)世，大家寫代碼大都遵循mvc模式的，將數(shù)據(jù)，視圖，業(yè)務(wù)邏輯拆開來(lái)寫，這樣代碼也會(huì)看著清晰一點(diǎn)。

vuex就是一個(gè)倉(cāng)庫(kù)，主要為了解決當(dāng)vue多個(gè)組件共享某一個(gè)狀態(tài)，以及一些兄弟組件等通訊不便。有了vuex但不是代表要將所有的數(shù)據(jù)存放在vuex中。

說(shuō)說(shuō)我的問(wèn)題

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 }} })} },

其實(shí)這段代碼邏輯如下，此處我需要在組件mounted的時(shí)候，需要請(qǐng)求一下數(shù)據(jù)，將一個(gè)列表渲染出來(lái)，但是我這個(gè)列表的數(shù)據(jù)是這個(gè)組件中私有的，所以并不需要存在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}}

那么從視圖，數(shù)據(jù)，業(yè)務(wù)邏輯分離的初衷出發(fā)，這樣構(gòu)造代碼是否合理？其實(shí)這個(gè)列表還有上一頁(yè)下一頁(yè)的功能，我需要構(gòu)造出請(qǐng)求參數(shù),來(lái)告訴服務(wù)器現(xiàn)在請(qǐng)求第幾頁(yè)的數(shù)據(jù)，請(qǐng)求多少條數(shù)據(jù)。功能并不難。但是我同事說(shuō)，像上一頁(yè)下一頁(yè)這樣的功能屬于數(shù)據(jù)層（因?yàn)楸举|(zhì)是是數(shù)據(jù)發(fā)生了變化），應(yīng)當(dāng)將這些東西放在store中。但是我的理解就是，首先我的這個(gè)列表是這個(gè)組件私有的，并不需要和其他的組件共享什么狀態(tài)。所以我僅僅是通過(guò)dispatch將請(qǐng)求的數(shù)據(jù)分發(fā)到頁(yè)面來(lái)，而且我在點(diǎn)擊上一頁(yè)，下一頁(yè)的時(shí)候需要計(jì)算currentPage，這應(yīng)該是屬于業(yè)務(wù)邏輯（Controller層）,而不是model層，（雖然最終變化還是數(shù)據(jù)，但是我要通過(guò)邏輯去判斷數(shù)據(jù)應(yīng)該怎么變）。請(qǐng)大神說(shuō)說(shuō)，在這種業(yè)務(wù)情況下應(yīng)該怎么構(gòu)造代碼比較合理，比較符合視圖，數(shù)據(jù)，業(yè)務(wù)邏輯分離的初衷，使代碼更加的優(yōu)雅。（項(xiàng)目并不是小項(xiàng)目，所以引入了vuex，這塊代碼僅僅只是一小部分。stroe中有拆分了很多不同的模塊）。大家都來(lái)說(shuō)說(shuō)自己的理解，和意見吧

問(wèn)題解答

你既然都說(shuō)了是一個(gè)私有組件 肯定是內(nèi)部都是計(jì)算好的 何必還要去放在store 統(tǒng)一管理？

你請(qǐng)求數(shù)據(jù)的api封裝了, 直接傳遞currentPage了就行了啊