发布文章（三）02-封面组件-图片按钮-素材列表-radio单选按钮 & 分页-Pagination分页组件使用和async异步获取后台数据

05-发布文章-封面组件-素材列表与分页

结构：src/components/my-image.vue

<el-tab-pane label="素材库" name="image">
          <!-- 单选按钮 -->
          <el-radio-group @change="changeCollect" v-model="reqParams.collect" size="small">
            <el-radio-button :label="false">全部</el-radio-button>
            <el-radio-button :label="true">收藏</el-radio-button>
          </el-radio-group>
          <!-- 图片列表 -->
          <div class="img_list">
               <!-- 遍历图片，：key 和 v-for一起使用-->
            <div class="img_item" v-for="item in images" :key="item.id">
              <img :src="item.url" alt />
            </div>
          </div>
          <!-- 分页第一步：分页，是个模板，可以重复调用 -->
          <el-pagination
            style="text-align:center"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="reqParams.per_page"
            :current-page="reqParams.page"
            @current-change="changePager"
            hide-on-single-page
          ></el-pagination>
        </el-tab-pane>

数据：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()
    },