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

Question

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

list为父组件
page为分页

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

Answer 1

安利一发：vue-simple-pager

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

具体见上面的github的repo吧

Answer 2

意思是一个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数据。

Answer 3

• 源码https://github.com/TIGERB/eas...

• demohttp://tigerb.github.io/easy-vue