Nuxt.jsでAPIの取得結果をストアに入れて表示する

はじめに

以前作成した画面でvuexのストアから値を表示するようにしてみる。

ストアに入れておけば詳細的なページを表示する時にAPIアクセスが不要になるはず。

Nuxt.jsのストア

storeディレクトリが用意されているので、そこに下記のjsを配置する。

index.js

import Vuex from 'vuex'
import axios from 'axios'

export default () => new Vuex.Store({
  state: {
    items:[]
  },
  getters: {
    items: (state) => state.items
  },
  mutations: {
    setItems (state, { items }) {
      state.items = items
    }
  },
  actions: {
    async fetchItems({ commit }) {
      await axios.get('http://localhost/api/sample').then((response) => {
          commit('setItems', { items: response.data })
      })
    }
  }
})

fetchItems のアクションを用意し、その中でAPIでの取得結果をsetItemsのミューテーションで設定している。

表示側 (抜粋)

index.vue

<script>
    import Item from '~/components/Item.vue'
    import { mapGetters } from 'vuex'

    export default {
        components: { Item },
        head: { title: 'Nuxt API Test' },
        async asyncData({ store }) {
            if (store.getters['items'].length) {
                return
            }
            await store.dispatch('fetchItems')
        },
        computed: {
            ...mapGetters(['items'])
        }
    }
</script>

asyncData 内で既に取得済みかを判断し、未取得の場合にfetchItemsのアクションを呼び出している。

また、mapGettersを使って算出プロパティとしてストアの内容にアクセス出来るようにする。