javascript - vue2,vuex,關於資料層,Controller層的一些疑惑
天蓬老师
天蓬老师 2017-07-03 11:41:41
0
1
791

問題如下,請大神解惑

先說說我個人的理解

  1. model層的變化會反應到view層上,view層的變化也會反映在model上。而在.vue的檔案中,model層就是data物件裡面的資料(這裡假設不存在store倉庫),在vue中view就是template裡的內容,model就是data物件中存在的數據,而類似methods裡面的方法都應該歸類在Controller層。

  2. 在mvvm這種模式暫未問世,大家寫程式碼大都遵循mvc模式的,將數據,視圖,業務邏輯拆開來寫,這樣程式碼也會看著清晰一點。

  3. vuex就是一個倉庫,主要為了解決當vue多個元件共享某一個狀態,以及一些兄弟元件等通訊不便。有了vuex但不是代表要將所有的資料存放在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的时候,需要请求一下数据,将一个列表渲染出来,但是我这个列表的数据是这个组件中私有的,所以并不需要存在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
        }
}

那麼從視圖,數據,業務邏輯分離的初衷出發,這樣建構程式碼是否合理?其實這個清單還有上一頁下一頁的功能,我需要建構出請求參數,來告訴伺服器現在請求第幾頁的數據,請求多少條數據。功能並不難。但是我同事說,像上一頁下一頁這樣的功能屬於資料層(因為本質是資料發生了變化),應將這些東西放在store。但是我的理解就是,首先我的這個清單是這個元件私有的,並不需要和其他的元件共享什麼狀態。所以我只是透過dispatch將請求的資料分發到頁面來,而且我在點擊上一頁,下一頁的時候需要計算currentPage,這應該是屬於業務邏輯(Controller層),而不是model層,(雖然最終變化還是數據,但是我要用邏輯去判斷數據該怎麼變)。
請大神說說,在這種業務情況下應該怎麼建構程式碼比較合理,比較符合視圖,數據,業務邏輯分離的初衷,使程式碼更加的優雅。 (專案並不是小項目,所以引入了vuex,這塊程式碼只是一小部分。stroe中有分割了很多不同的模組)。大家都來說說自己的理解,和意見吧

天蓬老师
天蓬老师

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

全部回覆(1)
阿神

你既然都說了是一個私有元件 肯定是內部都是計算好的 何必還要去放在store 統一管理?

你請求資料的api封裝了, 直接傳遞currentPage了就行了啊

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板