问题如下,请大神解惑先说说我个人的理解model层的变化会反应到view层上,view层的变化也会反映到model上。而在.vue的文件中,model层就是data对象里面的数据(此处假设不存在store仓库),在vue中view就是template里的内容,model就是data对象中存在的数据,而类似于methods里面的方法都应该归类在Controller层。在mvvm这种模式暂未问世,大家写代码大都遵循mvc模式的,将数据,视图,业务逻辑拆开来写,这样代码也会看着清晰一点。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;letListdata={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.pagesif(_this.listMaxPage>1){_this.nextSwitch=false}}})}},其实这段代码逻辑如下,此处我需要在组件mounted的时候,需要请求一下数据,将一个列表渲染出来,但是我这个列表的数据是这个组件中私有的,所以并不需要存在vuex中去通知其他的组件。store中的代码如下actions:{proposalListAc:function(context,data){letpromise=newPromise(function(resolve,reject){api.getData('proposalList',data).then(function(response){resolve(response.data);})})returnpromise}}那么从视图,数据,业务逻辑分离的初衷出发,这样构造代码是否合理?其实这个列表还有上一页下一页的功能,我需要构造出请求参数,来告诉服务器现在请求第几页的数据,请求多少条数据。功能并不难。但是我同事说,像上一页下一页这样的功能属于数据层(因为本质是是数据发生了变化),应当将这些东西放在store中。但是我的理解就是,首先我的这个列表是这个组件私有的,并不需要和其他的组件共享什么状态。所以我仅仅是通过dispatch将请求的数据分发到页面来,而且我在点击上一页,下一页的时候需要计算currentPage,这应该是属于业务逻辑(Controller层),而不是model层,(虽然最终变化还是数据,但是我要通过逻辑去判断数据应该怎么变)。请大神说说,在这种业务情况下应该怎么构造代码比较合理,比较符合视图,数据,业务逻辑分离的初衷,使代码更加的优雅。(项目并不是小项目,所以引入了vuex,这块代码仅仅只是一小部分。stroe中有拆分了很多不同的模块)。大家都来说说自己的理解,和意见吧
2 回答

慕标5832272
TA贡献1966条经验 获得超4个赞
你既然都说了是一个私有组件肯定是内部都是计算好的何必还要去放在store统一管理?你请求数据的api封装了,直接传递currentPage了就行了啊

Helenr
TA贡献1780条经验 获得超4个赞
说下我个人的理解和想法,我的Vue水平一般,所以仅供参考首先,你的理解的第3条在我看来是非常正确的,全局状态的最主要目的是解决多组件数据共享问题,如果一个组件的数据没有其它组件共享,完全没有必要去走Vuex那一套过程另外,分页查询列表的问题,我认为你可以把借用React中的presentationalcomponents和Containercomponent的概念,使用ContainerComponent做数据库的获取,专门做一个PresentationalComponent用来显示列表数据和当前的页状态,注意这个组件是个笨组件,只简单地显示数据,由Container组件传递数据过去,列表的数据和分页的状态情况由这个Container组件维护,如果这个数据没有其它组件需要使用,就别存储到全局状态中。
添加回答
举报
0/150
提交
取消