本サイトのトップページに合計の記事数を表示するUIを実装しました。



割とサクッとできるかなーと思ったのですが、意外と苦戦したポイントがあったのでご紹介します。

microCMSから記事を取得

microCMSのNuxt.js用モジュールは、未使用での記述になっています。

  async asyncData() {    
    const url = 'xxxxx-xxxxx-xxxxx';
    const allItem = await axios.get(`${url}?limit=10000`, {
      headers: { "X-MICROCMS-API-KEY": process.env.API_KEY }
    });

    return {
      total: allItem.data.contents
    };
},

記事の数を取得

記事の取得はできたので、あとは記事数(length)を取得すれば問題なくいけるのかなーと思っていました。

  mounted() {
    this.all = this.total.length
  }

■ HTML側

<p class="total"><span>総合記事数 : </span>{{ this.all }}件</p>

予想通り記事数を表示することができました。

起きた問題

無事に表示できたーと思った矢先、ページ遷移してトップに戻ると先ほどまで表示されていた総合記事数が表示されていません。

解決策

ページ遷移した際に、データ保持ができていないのが問題だと予想し取得した段階でstoreに保存することにしました。
綺麗な記述とは言えませんが、下記のようにストアに保存してから加工し、使用しています。
■ index.vue

  mounted() {
    this.$store.dispatch("post/getList", { all: this.total }); // allItemで取得したデータをstoreに保存
    this.all = this.$store.state.post.total.all.length; // トータル記事数
  }

■ store/post.js

export const state = () => ({
  total: []
});

export const mutations = {
  add(state, data) {
    state.total = data; //actionsで受け取ったデータをstateのtotalに渡す
  }
};

export const actions = {
  getList({ commit }, all) {
    commit("add", all); //mutation内 関数addにcommit
  }
};

最初と同じように表示され、ページ遷移しても件数が表示されないという現象はなくなり解決しました。