javascript - vue2, vuex, quelques doutes sur la couche de données et la couche contrôleur
La question est la suivante, aidez-moi à la résoudre
Permettez-moi d'abord de parler de ma compréhension personnelle
Les modifications apportées au calque de modèle seront reflétées sur le calque de vue, et les modifications apportées au calque de vue seront également reflétées sur le modèle. Dans le fichier .vue, la couche modèle est
data对象里面的数据（此处假设不存在store仓库）. Dans vue, la vue est le contenu du modèle, le modèle est les données existant dans l'objet de données et les méthodes similaires aux méthodes doivent être classées dans la couche Contrôleur.Le modèle mvvm n'est pas encore sorti. La plupart des gens écrivent du code selon le modèle mvc. Ils séparent les données, les vues et la logique métier et les écrivent, afin que le code paraisse plus clair.
vuex est un entrepôt, principalement pour résoudre les désagréments de communication lorsque plusieurs composants de Vue partagent un certain état, ainsi que certains composants frères. Avoir vuex ne signifie pas que toutes les données doivent être stockées dans vuex.
Parlez-moi de mon problème
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
}
}
Donc, partant de l'intention initiale de séparer les vues, les données et la logique métier, est-il raisonnable de structurer le code de cette manière ? En fait, cette liste a également la fonction de page précédente et de page suivante. Je dois construire les paramètres de requête pour indiquer au serveur quelle page de données est demandée et combien de données sont demandées. La fonctionnalité n'est pas difficile. Mais mon collègue a dit que des fonctions telles que la page précédente et la page suivante appartiennent à la couche de données (car l'essentiel est que les données ont changé) et que ces éléments devraient être placés dans le magasin. Mais je crois comprendre que tout d’abord, ma liste est privée pour ce composant et n’a pas besoin de partager un état avec d’autres composants. Je distribue donc simplement les données demandées à la page via la répartition, et je dois calculer la page actuelle en cliquant sur la page précédente ou la page suivante. Cela doit appartenir à la logique métier (couche contrôleur), pas à la couche modèle (bien que la couche modèle soit la suivante). le changement final concerne toujours les données, mais je dois utiliser la logique pour juger comment les données doivent changer).
Veuillez me dire comment structurer le code dans cette situation commerciale, ce qui est plus raisonnable et conforme à l'intention initiale de séparer les vues, les données et la logique métier, rendant le code plus élégant. (Le projet n'est pas un petit projet, c'est pourquoi vuex a été introduit. Ce code n'est qu'une petite partie. Il existe de nombreux modules différents en magasin). Tout le monde, partagez votre compréhension et vos opinions
