首页 > vuex+vue-resource+vue-router 怎么实现分页

vuex+vue-resource+vue-router 怎么实现分页

vuex+vue-resource+vue-router 怎么实现分页


list为父组件
page为分页

父组件怎么和子组件实现分页啊


意思是一个list组件展示一定数量的信息,page组件是一个包含了“至首页、至末页、至临近页数”的组件吗?

那按你提的问题,我觉得大致的思路是这样的:

  1. 你的list组件肯定需要根据一个包含了所需展示信息的数组来进行渲染。

  2. 这个数组需要根据不同的页数动态改变,也就是每次改变页数时,需要从后端请求新的数据,这个过程你可以用vue-resource来完成。

  3. 为了每次请求到对应的数据,你的请求接口中至少要有一个页数参数,也可能还有每页展示数量参数。以基本的页数来说,你需要在本地指定一个数据来储存这一参数,比如page

  4. 这样就形成了一个数据驱动的分页,因为每次改变页数,只要操作page,然后执行相关的方法获取新的数据。同样的,当信息数据更新之后,page组件在视图上应该也进行相应的更新,这里可以用props属性将page数据同步至page组件中。注意,因为实际上可能是通过操作page组件来改变页数,所以应该用props.sync。

  5. page组件在视图上需要你做一些分类处理,这里不做过多的讨论。

那么什么时候需要用到vue-router和vuex呢?

按照上面的思路,你完成之后应该可以实现点击不同页数的按钮,就完成拉取新数据、渲染新数据、更新list和page视图的工作。但是如果用户已经抵达了n页,然后刷新了一下页面(或者所有会销毁组件的操作),就会发现又回到了起始页的数据。
这样在用户体验上就会有很大的问题,一般我们通过在url上添加数据,来帮助用户“定位”。例如打开 domain/3/ ,就能在初始化组件式,知道应该渲染第3页的数据。vue-router就是一个vue专用的路由库,可以更方面的操作路由相关的逻辑。

vuex在这样的单一分页中看起来用处不是太大,但是如果你在整个项目中需要多处同步你的分页结果,可能需要用到vuex。
举个极端情况:
比如我在list组件中抵达了第3页,这时我需要当我回到首页时,首页上显示的是对应的第3页的第1条信息。同理,如果我在list组件中抵达了第n页,当我来到首页时,也需要显示第n页的第1条信息。
当然这种情况下vuex也不是必须的,在1.x的vue中可以使用$dispatch$broadcast来全局的传递数据。但是当这样的数据流变多时,项目会变得难以管理,所以可以使用vuex来解决。
在vuex的store中储存一个list数据,在list组件中每次跳转页数,获取到新数据时,就通过对应的actions把数据更新到list中,然后在首页就能用vuex的getters来获取对应的list数据。


安利一发:vue-simple-pager

支持传统翻页组件那样通过事件得到翻页后的页码;
并且还支持在使用vue-router时,通过query或者params来跳转翻页,这样每一次翻页都形成一次浏览器历史,从而可以很好的利用浏览器的前进后退按钮来浏览不同页。

具体见上面的githubrepo


【热门文章】
【热门文章】