Edited at

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一覧記事を取得


出来上がりのイメージ

Screenshot(5).png


仕様説明


ソースコード


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