发布文章（三）02-封面组件-图片按钮-素材列表-radio单选按钮 分页-Pagination分页组件使用和async异步获取后台数据
05-发布文章-封面组件-素材列表与分页
作者：viceen
结构：src/components/my-image.vue
全部
收藏
![]()
数据：src/components/my-image.vue中的data里
// 素材列表请求参数对象
reqParams: {
collect: false,
//分页第二步
page: 1, //默认第一页
per_page: 8 //当前界面一个显示几页
},
// 素材列表数据
images: [],
// 素材总图片数量
total: 0
函数：src/components/my-image.vue中的methods里
// post 请求 post(‘地址’，‘数据’)
// get 请求 get(‘地址’，‘{params:数据}’)
//解构赋值
// 得到 用户 信息 res.data.data res = {data:{data:'用户信息',message:'提示'}}
// 以前获取对象中的属性值：res.data ={data:'用户信息'}
// ES6提供解构赋值语法：{data:{data:data}}
// 函数的返回值 加载await之后 是then接受的数据
// 在使用await之后在 外层函数必须用async 来申明
//获取后台数据的方法
async getImages () {
const {
data: { data }
} = await this.$http.get('user/images', { params: this.reqParams })
this.images = data.results
// 设置总条数
this.total = data.total_count
},
// 分页第三步：切换
changePager (newPage) {
this.reqParams.page = newPage
this.getImages()
},
// 全部与收藏切换
changeCollect () {
this.reqParams.page = 1 //默认展示第一页
this.getImages() //获取图片数据
}
获取列表的时机：src/components/my-image.vue中的methods里
openDialog () {
this.dialogVisible = true
// 获取素材列表数据
+ this.getImages()
},
作者：viceen
