Nuxt.jsでRESAS-APIの都道府県一覧を取得してVuexに格納する

RESAS-API概要

地域経済分析システムRESASが提供している都道府県一覧をAPIから取得する。

取得結果のサンプル。全データはこちらを参照。

• prefCode：都道府県コード
• prefName：都道府県名

{ "message": null, 
  "result": [
      { "prefCode": 1, "prefName": "北海道" }, 
      { "prefCode": 2, "prefName": "青森県" }
  ] }

RESASを利用する準備

axiosをプラグイン化して、RESAS-APIを利用できる環境を整える。
詳細はこちらの記事を参照。

都道府県一覧をVuexに格納

ストアはモジュールモードを利用する。
Nuxtプロジェクト内にstore/prefList.jsを作成。

import { cloneDeep } from 'lodash'

const initialState = {
  prefList: [],
}

// ShallowCopyを避けるため、lodashのcloneDeepを用いる。
export const state = () => cloneDeep(initialState)

export const getters = {
  getPrefList(state) {
    return state.prefList
  },
}

export const mutations = {
  initPrefSet(state, payload) {
    if (payload === null) {
      state = cloneDeep(initialState)
    } else {
      state.prefList = payload
    }
  },
}

export const actions = {
  async fetchPrefAPI({ commit }) {
    // APIから取得する場合
    // const url = 'api/v1/prefectures'
    // const { data } = await this.$resas.get(url)

    // ローカルJSONから取得する場合
    const data = await import('~/data/codes/preflist.json')
    commit('initPrefSet', data.result)
  },
}

state

都道府県一覧を格納する変数prefListを設定。
ShallowCopyを避けるため、lodashのcloneDeepを用いる。

const initialState = {
  prefList: [],
}
export const state = () => cloneDeep(initialState)

actions

RESAS-APIから都道府県一覧を取得して、結果をmutationsに渡す。
ここでは、キー名resultを抽出している。

export const actions = {
  async fetchPrefAPI({ commit }) {
    const url = 'api/v1/prefectures'
    const { data } = await this.$resas.get(url)
    commit('initPrefSet', data.result)
  },
}

都道府県一覧をJSONファイルに保存している場合は、ファイルをimportする。

export const actions = {
  async fetchPrefAPI({ commit }) {
    const data = await import('~/data/codes/preflist.json')
    commit('initPrefSet', data.result)
  },
}

mutations

取得した結果をstateに格納する。

export const mutations = {
  initPrefSet(state, payload) {
    if (payload === null) {
      state = cloneDeep(initialState)
    } else {
      state.prefList = payload
    }
  },
}

getters

stateの値は、gettersを介して参照する。

export const getters = {
  getPrefList(state) {
    return state.prefList
  },
}

middlewareの設定

SSRのクライアントサイドでレンダリングされる前にstoreに保存したいので、ミドルウェアを利用する。
middleware/vuex.jsを作成。

export default async ({ store }) => {
  await store.dispatch('prefList/fetchPrefAPI')
}

nuxt.config.jsでmiddlewareを有効化。

router: {
    middleware: 'vuex' //ミドルウェアのファイル名
  },

都道府県一覧を利用

コンポーネントでストアの値を取得するには、mapGettersを利用する。

例えば兵庫県の市区町村データを取得する場合は次のとおり。

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      prefCode: 28,
    }
  },
  computed: {
    ...mapGetters('cityList', ['getCityList']),
    cityList() {
      return this.getCityList(this.prefCode)
    },
  },
}
</script>