javascript - vue2, vuex, some doubts about the data layer and Controller layer

Question

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的时候，需要请求一下数据，将一个列表渲染出来，但是我这个列表的数据是这个组件中私有的，所以并不需要存在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

Answer 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