【タクソノミーフィルター編】WP REST APIで投稿を非同期で全件取得した話

<template>
  <div class="my-post-archive">
    <taxFilter
      v-if="taxFilterShow"
      :taxFetchUrl="taxFetchUrl"
      :taxFilterSearch="taxFilterSearch"
      :taxQuery="taxQuery"
      :dataOrigin="dataOrigin"
      :paginationShow="paginationShow"
    />
    <article class="archive" v-if="datas">...</article>
    <pagination ... />
</div>
</template>

<style lang="scss" scoped>...</style>

<script>
  import axios from 'axios'
  import pagination from './pagination.vue'
  import taxFilter from './taxFilter.vue'

  export default {
  props: {
    postFetchUrl: {...},
    postQuery: {...},
    perPage: {...},
    /* pagination  */
    pagerVisible: {...},
    pagerScroll: {...},
    paginationShow: {...},
    /* taxFilter ------------------------------------------------- */
    taxFetchUrl: {
      type: String,
      default: '/wp-json/wp/v2/categories',
    },
    taxFilterShow: {
      type: Boolean,
      default: true,
    },
    taxFilterSearch: {
      type: String,
      default: 'or', // 'or' or 'and'
    },
    taxQuery: {
      type: Object,
      default: () => ({
      'exclude': 1, // 未分類の非取得
      })
    },
  },
  components: {
    pagination,
    taxFilter
  },
...

<template>
  <div class="filter">
    <div class="filter__label">
      <input type="checkbox" id="term_id_0">
      <label for="term_id_0" v-text="ターム0">
    </div>
    <div class="filter__label">
      <input type="checkbox" id="term_id_1">
      <label for="term_id_1" v-text="ターム1">
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1rem;
    border-bottom: 2px solid #eee;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }
</style>

<script>
  import axios from 'axios'
  
  export default {
    props: {
      taxFetchUrl: {
        type: String,
      },
      taxFilterSearch: {
        type: String,
      },
      taxQuery: {
        type: Object,
      },
      dataOrigin: {
        type: Array,
      },
      paginationShow: {
        type: Boolean,
      },
    },
    data() {
      return {
        terms: [],
        dataTerms: [],
        totalTaxPages: 0,
      }
    },
  }
</script>

<div id="archive">
  <archive
    :post-fetch-url="'/wp-json/wp/v2/posts'"
    :per-page="10"
    :post-query="{
      '_fields': 'id,content,title,categories,_links,_embedded',
      '_embed': '',
    }"
    :pager-visible="5"
    :pager-scroll="1"
    :pagination-show="true"
    :tax-fetch-url="'/wp-json/wp/v2/categories'"
    :tax-filter-show="true"
    :tax-filter-search="'or'"
    :tax-query="{
      '_fields': 'id,name,slug,count',
      'exclude': 1,
    }"
    #post="{ data }"
  >
    <span v-text="data.id"></span>
  </archive>
</div>

async getTermData(num, taxQuery = this.taxQuery) {
  // パラメーターを追加できるようにしておく
  const params = { page: num }
  const insertParams = await {...taxQuery, ...params}
  await axios.get(this.taxFetchUrl, {params: insertParams})
  .then((res) => {
    // タームの情報をdataTermsに結合
    this.dataTerms = this.dataTerms.concat(res.data)
  })
  .catch(error => console.log(error))
},

async getTaxInfo() {
  await axios.get(this.taxFetchUrl)
  .then((res) => {
    this.totalTaxPages = Number(res.headers['x-wp-totalpages']) // 合計ページ数
  })
  .catch(error => console.log(error))
},

async getTermDatas() {
  // タクソノミー情報の取得
  await this.getTaxInfo()
  // タームの全件取得
  const numTaxAry = [...Array(this.totalTaxPages).keys()].map( i => ++i )
  for (let num of numTaxAry) {
    await this.getTermData(num)
  }
},

mounted() {
  this.getTaxDatas()
},

...
<div class="filter__label" v-for="term in dataTerms" :key="term.id">
  <input type="checkbox" :id="`term_${term.id}`" v-model="terms" :value="term.id">
  <label :for="`term_${term.id}`" v-text="`${term.name}(${term.count})`" />
</div>
...

taxName() {
  return this.taxFetchUrl.match(/.*\/([\w|~]+).*$/u)[1]
},

async postTaxFilter() {
  // 送信データの初期化
  let datas = []
  
  // タームが指定されていない場合（チェックを外した場合など）
  if(!this.terms.length){
    // 全データをdataBaseに格納
    datas = await this.dataOrigin
  
  // タームが指定されている場合
  } else {

    // or検索の場合
    if(this.taxFilterSearch == 'or') {
      // フィルターで該当タームに属する投稿をdataBaseに格納
     datas = await this.dataOrigin.filter((obj)=>{
       return this.terms.some(id => obj[this.taxName].includes(id))
     })

    // and検索の場合（or以外の場合）
    } else {
      // フィルターで該当タームに属する投稿をdataBaseに格納
      datas = await this.dataOrigin.filter((obj)=>{
        return this.terms.every(id => obj[this.taxName].includes(id))
      })
    }
  }
  // dataBaseの更新
  this.$emit('changeData', datas)
  // totalPostsの更新
  this.$emit('changeTotal', datas.length)
},

[3,5].some(id => [1,5].includes(id))
// (3 => [1,5].includes(3))  // false
// (5 => [1,5].includes(5))  // true

// dataBaseの受け取り
changeDataBase(datas) {
  this.dataBase = datas
},
// totalPostsの受け取り
changeTotalPosts(num) {
  this.totalPosts = num
},

<taxFilter
  v-if="taxFilterShow"
  ...
  @changeData="changeDataBase"
  @changeTotal="changeTotalPosts"
/>

// 親
changeDataBase(datas)           // methods
@changeData="changeDataBase"    // template

// 子
this.$emit('changeData', datas) // methods

async terms() {
  // フィルターかける
  await this.postTaxFilter()
  // paginationを表示しない場合はスルー
  if(this.paginationShow) this.$parent.$refs.pagination.pagerDefault()
},

...
<pagination
  v-if="paginationShow"
  ref="pagination"
  ...

async getPostDatas() {
  // paginationもしくはtaxFilterを表示する場合
  if(this.paginationShow === true || this.taxFilterShow === true) {
    await this.getPostInfo()
    // paginationを表示する場合
    if(this.paginationShow) this.$refs.pagination.pagerDefault()
    const numPostAry = [...Array(this.totalPages).keys()].map( i => ++i )
    for (let num of numPostAry) {
  await this.getPostData(num)
    }
  } else {
      // paginationもしくはtaxFilterを表示しない場合
      await this.getPostData(false)
  }
},