Vue.js好きの人たちにVuexをおすすめするための実装例

// ----------------------------------------------------------------------------
// State
// ----------------------------------------------------------------------------
export const state = () => ({
  items: [], // 投稿の配列
})
// ----------------------------------------------------------------------------
// Mutation
// ----------------------------------------------------------------------------
export const mutations = {
  // 投稿を一括登録
  setItems (state, {items}) {
    state.items = items
  },
  // 投稿配列をクリアー
  clearItems(state) {
    state.items = []
  }
}
// ----------------------------------------------------------------------------
// Getter 
// ----------------------------------------------------------------------------
export const getters = {
  // 投稿記事の配列
  items(state) {
    return state.items
  }, 
  // itemsが空のとき trueを返す
  is_empty_items(state) {
    return (state.items.length < 1)
  } 
}
// ----------------------------------------------------------------------------
// Actions
// ----------------------------------------------------------------------------
import axios from 'axios'
export const actions = {
  // Qiita API呼び出し
  async fetchItems({commit, getters}) {
    console.log(" --- getters.is_empty_items items[]が空なら true ->  ", getters.is_empty_items)
    if(getters.is_empty_items) {
      // axiosで Qiita APIの呼び出し
      // async/awaitにより非同期処理
      //  axios.$get(.....).then(res =>  ....)と書かなくてもよい

      const items = await this.$axios.$get('/items?query=tag:nuxt.js')
      // nuxt.config.jsにて baseURL設定
      //const items = await this.$axios.$get('https://qiita.com/api/v2/items?query=tag:nuxt.js')

      commit('setItems', {items})
      console.log(" --- items の commit 完了  size -> ", items.length)
    }
  }
}

<template>
  <v-content>
    <v-container>
      <v-layout row justify-center>
            <h2>Nuxt.js のタグが付けられた投稿の一覧</h2>
            <v-btn class="ml-5" @click="fetchItems">更新</v-btn>
            <v-btn @click="clearItems">消去</v-btn>
      </v-layout>
      <v-layout wrap>
        <v-row>
          <v-col cols="12">
              <ul>
                <li v-for="item in items" :key="item.id">
                  <h3>
                    <span>{{item.title}}</span>
                    <small> by {{item.user.id}}</small>
                  </h3>
                  <h4>
                    <div>{{item.body.slice(0, 130)}}.....</div>
                    <p><a :href="item.url">{{item.url}}</a></p>
                  </h4>
                </li>
              </ul>
          </v-col>
        </v-row>
      </v-layout>
    </v-container>
  </v-content>
</template>

<script>
import {mapGetters, mapActions, mapMutations} from "vuex"
export default {

  layout: 'vuetify', // Layoutファイルの指定

  head() { return { title: "Qiita" } },
  // componetの生成前に呼び出す

  fetch({store}) {
    store.dispatch('qiita/fetchItems')
  },

  computed: {
    ...mapGetters('qiita', ['items'])
    // 以下と同じ
    //items: {
    //  get() { return this.$store.state['qiita'].items }
    //},
  },

  methods: {
    ...mapActions('qiita', ['fetchItems']),
    // 以下と同じ
    //fetchItems() { this.$store.dispatch('qiita/fetchItems') },
    ...mapMutations('qiita', ['clearItems']),
    // 以下と同じ
    //clearItems() { this.$store.commit('qiita/clearItems') }
  }
}  
</script>