#前回の復習
シリーズで書いております。前回まで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を動かす。
###ソースコード
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
<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を理解深めていきたいと思います。