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; } ...