7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-08

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

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?