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

RESAS-API概要

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

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

  • prefCode:都道府県コード
  • prefName:都道府県名
1
2
3
4
5
{ "message": null, 
"result": [
{ "prefCode": 1, "prefName": "北海道" },
{ "prefCode": 2, "prefName": "青森県" }
] }

RESASを利用する準備

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

都道府県一覧をVuexに格納

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

prefList.jslink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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を用いる。

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

actions

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

1
2
3
4
5
6
7
export const actions = {
async fetchPrefAPI({ commit }) {
const url = 'api/v1/prefectures'
const { data } = await this.$resas.get(url)
commit('initPrefSet', data.result)
},
}

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

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

mutations

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

1
2
3
4
5
6
7
8
9
export const mutations = {
initPrefSet(state, payload) {
if (payload === null) {
state = cloneDeep(initialState)
} else {
state.prefList = payload
}
},
}

getters

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

1
2
3
4
5
export const getters = {
getPrefList(state) {
return state.prefList
},
}

middlewareの設定

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

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

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

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

都道府県一覧を利用

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
prefCode: 28,
}
},
computed: {
...mapGetters('cityList', ['getCityList']),
cityList() {
return this.getCityList(this.prefCode)
},
},
}
</script>