javascript - vue2,vuex,關(guān)于數(shù)據(jù)層,Controller層的一些疑惑
問題描述
問題如下,請大神解惑
先說說我個人的理解
model層的變化會反應(yīng)到view層上,view層的變化也會反映到model上。而在.vue的文件中,model層就是data對象里面的數(shù)據(jù)(此處假設(shè)不存在store倉庫),在vue中view就是template里的內(nèi)容,model就是data對象中存在的數(shù)據(jù),而類似于methods里面的方法都應(yīng)該歸類在Controller層。
在mvvm這種模式暫未問世,大家寫代碼大都遵循mvc模式的,將數(shù)據(jù),視圖,業(yè)務(wù)邏輯拆開來寫,這樣代碼也會看著清晰一點(diǎn)。
vuex就是一個倉庫,主要為了解決當(dāng)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 }} })} },
其實(shí)這段代碼邏輯如下,此處我需要在組件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è)務(wù)邏輯分離的初衷出發(fā),這樣構(gòu)造代碼是否合理?其實(shí)這個列表還有上一頁下一頁的功能,我需要構(gòu)造出請求參數(shù),來告訴服務(wù)器現(xiàn)在請求第幾頁的數(shù)據(jù),請求多少條數(shù)據(jù)。功能并不難。但是我同事說,像上一頁下一頁這樣的功能屬于數(shù)據(jù)層(因?yàn)楸举|(zhì)是是數(shù)據(jù)發(fā)生了變化),應(yīng)當(dāng)將這些東西放在store中。但是我的理解就是,首先我的這個列表是這個組件私有的,并不需要和其他的組件共享什么狀態(tài)。所以我僅僅是通過dispatch將請求的數(shù)據(jù)分發(fā)到頁面來,而且我在點(diǎn)擊上一頁,下一頁的時候需要計(jì)算currentPage,這應(yīng)該是屬于業(yè)務(wù)邏輯(Controller層),而不是model層,(雖然最終變化還是數(shù)據(jù),但是我要通過邏輯去判斷數(shù)據(jù)應(yīng)該怎么變)。請大神說說,在這種業(yè)務(wù)情況下應(yīng)該怎么構(gòu)造代碼比較合理,比較符合視圖,數(shù)據(jù),業(yè)務(wù)邏輯分離的初衷,使代碼更加的優(yōu)雅。(項(xiàng)目并不是小項(xiàng)目,所以引入了vuex,這塊代碼僅僅只是一小部分。stroe中有拆分了很多不同的模塊)。大家都來說說自己的理解,和意見吧
問題解答
回答1:你既然都說了是一個私有組件 肯定是內(nèi)部都是計(jì)算好的 何必還要去放在store 統(tǒng)一管理?
你請求數(shù)據(jù)的api封裝了, 直接傳遞currentPage了就行了啊
相關(guān)文章:
1. javascript - 關(guān)于vuex,已知的是在組件中調(diào)用 dispatch 方法,返回值是 undefined,不知是哪里出了問題2. javascript - vuex中子組件無法調(diào)用公共狀態(tài)3. javascript - vuex的mapState與其它c(diǎn)omputed屬性共存的正確寫法是?4. javascript - vuex 參數(shù)解構(gòu)的問題5. javascript - Vuex 實(shí)例名稱只能是store嗎6. javascript - vuex中action應(yīng)該怎么分發(fā)事件7. javascript - vuex 使用dispatch 提示not found?8. javascript - Vue2 的自己寫transition組件,為啥使用new class的方法無法綁定9. html5 - npm install vuex -s 時報(bào)錯10. javascript - 怎樣在vue組件中優(yōu)雅的獲得vuex中的state的值
