亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

javascript - vue2, vuex, some doubts about the data layer and Controller layer
天蓬老師
天蓬老師 2017-07-03 11:41:41
0
1
967

The question is as follows, please ask for help

Let me talk about my personal understanding first

  1. Changes in the model layer will be reflected on the view layer, and changes in the view layer will also be reflected on the model. In the .vue file, the model layer is the data in the data object (assuming there is no store warehouse here) . In vue, the view is the content in the template, and the model is the data that exists in the data object. , and methods similar to methods should be classified in the Controller layer.

  2. Before the mvvm model came out, most people wrote code according to the mvc model. They separated the data, views, and business logic and wrote them, so that the code would look clearer.

  3. vuex is a warehouse, mainly to solve the communication inconvenience when multiple components of vue share a certain state, as well as some sibling components. Having vuex does not mean that all data should be stored in vuex.

Tell me about my 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的時候,需要請求一下數(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
        }
}

So starting from the original intention of separating views, data, and business logic, is it reasonable to structure the code in this way? In fact, this list also has the function of previous page and next page. I need to construct the request parameters to tell the server which page of data is being requested and how many pieces of data are requested. Functionality is not difficult. But my colleague said that functions such as previous page and next page belong to the data layer (because the essence is that the data has changed), and these things should be placed in the store. But my understanding is that first of all, my list is private to this component and does not need to share any state with other components. So I just distribute the requested data to the page through dispatch, and I need to calculate the currentPage when clicking on the previous page or the next page. This should belong to the business logic (Controller layer), not the model layer (although The final change is still the data, but I have to use logic to judge how the data should change).

Please tell me how to structure the code in this business situation to be more reasonable and in line with the original intention of separating views, data and business logic, making the code more elegant. (The project is not a small project, so vuex was introduced. This code is only a small part. There are many different modules in store). Everyone, please share your understanding and opinions

天蓬老師
天蓬老師

歡迎選擇我的課程,讓我們一起見證您的進步~~

reply all(1)
阿神

Since you said it is a private component, it must be calculated internally. Why bother to put it in the store for unified management?

The api you use to request data is encapsulated, just pass the currentPage directly

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template