問題描述

問題如下，請大神解惑

先說說我個人的理解

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

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

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

說說我的問題

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

問題解答

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

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