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

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を理解深めていきたいと思います。