vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下) その3(actions編)

前回の復習

シリーズで書いております。前回までvuexの基本的な概念とstate,gettersについて書かせていただきました。↓
vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下)　その1(state,getters編)
vuexを少しずつ少しずつ理解していこう(Nuxt.js環境下)　その2(mutations編)

前回まででvuexのstate,getters,mutationsを理解したところで今回はactionsについて理解していこうと思います。

actions(アクションズ)

mutationsの処理を行う前にここでapiからの情報を取得したりします。

参考書籍：

著@potato4d
タイトル　Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発
※Nuxt.jsを使った開発について丁寧でわりやすく、非常に重宝しております。著者の方に深くお礼申し上げます。

事例①　qiita一覧記事を取得

出来上がりのイメージ

仕様説明

• qiitaのapiから記事一覧を取得する。所得したい情報は[vuex]のタグが入っている記事。
• 取得URLはhttps://qiita.com/api/v2/items?query=tag:vuex
• asyncData メソッドを使ってdispatchを動かす。

ソースコード

store/index.js

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state:{
      qiitas:{}
    },
    getters:{
      qiitas:(state)=>state.qiitas
    },
    mutations: {
      qiitasMutan(state,{qiitasDatas}){
        state.qiitas = qiitasDatas;
      }
    },
    actions: {
      async qiitasActi({commit}){
        const qiitasDatas = await this.$axios.$get('https://qiita.com/api/v2/items?query=tag:vuex')
        commit('qiitasMutan',{qiitasDatas})
      }
    }
  })
}

export default createStore

index.vue

<template>
  <div>
    <h1>qiitaからタグ「vuex」の記事情報一覧を取得</h1>
    <ul>
      <li v-for="qiita in qiitas" :key="qiita.id">
        <h4><a :href="qiita.url">{{ qiita.title }}</a></h4>
      </li>
    </ul>
</div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    async asyncData({store}){
      if(store.getters['qiitas'].length){
        return
      }
      await store.dispatch('qiitasActi')
    },
    computed:{
      ...mapGetters(['qiitas'])
    }
  }
</script>

以上です。
「state」「getters」「mutations」「actions」について、基本は理解できました。
これを応用させてどんどんvuexを理解深めていきたいと思います。