Nuxt.js V2環境でモジュールモードで作り直してみた

概要

Nuxt.js v2でのモジュールモードでaxiosを使ったシンプルなサンプルがないので作ってみました。v3でクラシックモードは廃止になりますし。

モジュールモードはここを参考。
https://qiita.com/y-miine/items/028c73aa3f87e983ed4c
サンプルはここのお天気サンプルをモジュールモードに書き直してみました。
https://qiita.com/kawa64372358/items/02348536eea1881676e8

詳細はコードのコメントでわかると思います。

コード

モジュールモードではexportだけでstoreを記述するのがポイント。
store/index.js

import axios from 'axios';

//データを定義
export const state = () => ({//stateは必須
    weather:null    //データ
});

//データの更新系を定義。関数で定義
export const mutations = {
    updateWeather (state, weather) {
        state.weather = weather;//データの更新
    }
}
//外部からのコールイベントを定義。関数で定義
export const actions = {
    //通信
    async fetchWeather({commit}){
        const res = await axios.get(`http://weather.livedoor.com/forecast/webservice/json/v1?city=400040`).catch((err) => {
            throw new Error(err);
        });
      
        // レスポンスがコンソールに表示
        console.log(res.data);
        commit('updateWeather', res.data);//mutations経由でデータを更新
    }
}

components/Pages/ForcastCard/index.vue

<template>
  <div class="forcast-list">
    <h2 class="forcast-list__title">{{ forecast.dateLabel }}</h2>
    <dl>
      <dt class="forcast-list__telop">{{ forecast.telop }}</dt>
      <dt>
        <img
          v-show="forecast.image.url"
          :src="forecast.image.url"
          class="forcast-list__image"
          alt="forcast.image.title">
      </dt>
    </dl>
  </div>
</template>

<script>
export default {
  //親のvueから値をpropsで受け取る
  props: {
    forecast: {
      type: Object,
      required: true
    }
  }
};
</script>

pages/index.vue

<template>
  <section class="weather">
    <h1 class="weather__title">{{weather.title}}</h1>
    <ForcastCard
      v-for="(forecast, i) in weather.forecasts"
      :forecast="forecast"
      :key="`weather__forcasts-key-${i}`"/>
  </section>
</template>

<script>

//自作コンポーネント取り込み
import ForcastCard from '~/components/Pages/ForcastCard';

//バインディング機能
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  //コンポーネントを定義
  components: {
    ForcastCard
  },
  //キャッシュされる計算を定義。おもにバインディングで使う
  computed: {
    //バインディングの情報をここで配列で指定。バインディングがなければ$store.state.xとかでアクセス可能。
    ...mapState(['weather']),
    ...mapActions(['fetchWeather'])
  },
  //通信実行。表示で即時実行
  async asyncData({ store, params }) {
    await store.dispatch('fetchWeather');
  }
};
</script>