小村のポートフォリオサイト開発（１７）　API呼び出しをstoreに記述する

こんばんは、小村だよ！
今日も下記のポートフォリオサイトを構築していくよ
- サイト：Little Village
まずはデデン！

サクサクっとサムネイル画像を表示できるようにUIを修正しました。
- 修正箇所は割愛。
画像入るとだいぶそれっぽく見えますねー
今日は何をしようかなーーー
ひとまず今は単純にAPI呼び出ししてますが、今後にそなえてstoreに移動しましょうか。
そうしないと他の箇所で使うときに困ることになりますからねー

記録

現状整理

UI側の修正になります。
現在はBrogCardというコンポーネント内でAPIを呼び出してます。

この場合、他のコンポーネントではAPIの値を取得できません
APIの呼び出しなどを１ヵ所で行い、このBrogCardはそこから値を呼び出すのが好ましいです
そこで出てくるのがstoreになります
参考：Nuxt.js store
storeはvuexの仕組みを適用したNuxt.jsのフォルダになります
API以外にも、他のコンポーネントと値を受け渡したいときはこのstoreを経由します。

storeを記述

参考：Nuxt.jsの基本的な使い方【storeを使ったデータの状態管理編】
では早速書いていきましょうか！
storeではstate``getter``mutation``actionの4つの要素があります
詳しい説明は割愛！基礎なので書籍読もう！
書いた結果がこちら

export const state = () => ({
  itemsloading: false,
  items: [],
})

export const getters = {
  getEntryItemsLoading(state) {
    return state.itemsloading
  },
  getEntryItems(state) {
    return state.items
  },
}

export const mutations = {
  SET_ITEMS_LOADING(state, bool) {
    state.itemsloading = bool
  },
  SET_ITEMS(state, items) {
    state.items = items
  },
}

export const actions = {
  async fetchEntries({ commit }, params) {
    commit('SET_ITEMS_LOADING', true)
    const response = await this.$axios.get('/api/entries/')
    const items = response.data
    commit('SET_ITEMS', items)
    commit('SET_ITEMS_LOADING', false)
  },
}