Element-ui实用工具之axios请求和分页

最近在做一个前后端的博客系统项目，前端选择了用vue和element-ui，现在刚好做出了一个用户管理的页面，所以来记录一下。首先看一下效果先。

能学习到的点有：axios提交请求，element-ui实现分页，vuex，布局等这些知识点。

1.讲解下分页效果实现：

element-ui通过设置不同的属性可以构建出这些分页效果

实际项目中：

div中

data中

注解：其中带：这个的代表绑定了data里面的分页属性：page（共几页），pageSize（每页大小）,currentPage（当前页）,total（总共有多少条），带@是绑定了某个方法，一般有：实现动态改变每页大小的方法，动态跳转到某页。

getList就是提交了axios请求，只不过是我把它封装好了

基本思路：分页的时候哪些分页的基本属性和方法该懂得，其次就是axios提交请求一块会用。

接下来讲讲axios和vuex

axios的思路：cacheService.js（缓存必要的数据，放入sessionStorage或者localStorage中）--->index.js（配置axios的基信息）--->admin.js（建立axios和vuex中的交互）---->暴露方法供组件调用

1.cacheService.js

大概如此

2.index.js

基本配置

初步的请求

3.admin.js

这个便是配置在vuex中的，每次请求我都可以选择下的将信息保留在vuex中

vue组件中使用的请求方法是通过mapActions,从vuex中的action中获得的。

刚开始写关于技术性整理的文章，因为代码量的问题，梳理起来不太容易，内容也多，有兴趣的可以一起交流。