The question is as follows, please ask for help
Let me talk about my personal understanding first
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.
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
歡迎選擇我的課程,讓我們一起見證您的進步~~
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