Vuexストアによる状態管理が十分理解できていなかったが、図解をすることでかなり理解できたからアウトプットしていく。

Vuexストアの図解

（参考記事）
https://codezine.jp/article/detail/11994

【流れの説明】

コンポーネントがWebページの更新をするためにアクションを実行する（dispatch）。
アクションでWeb APIなどの更新に必要なデータを取得（１）。
アクションで取得したデータを状態に反映させるためにミューテーションを実行する（commit）。
ミューテーションでステートの変更を行う（Mutate）。
ステートでWebページ全体の状態を保持する（３）。
変更されたステートに基づいてコンポーネントが画面を表示（Render）。

細く言えば、まだいろいろな要素が残って行っているけど、基本的にこの流れをおさえておけば、かなり理解できた。

実際に使用してみる

概念だけだとあまり定着できないことの方が多いから手を動かしてみる。

花谷氏の「Nuxt.jsビギナーズガイド」を使って学習した内容をいかして、axios-moduleを利用しWordpressの記事情報を取得するときの状態管理を記述していく。

ヘッドレスのwpの導入方法については今回は割愛。

store/index.js

// 5. ステートでWebページ全体の状態を保持する（３）。
export const state = () => ({
  posts: [],
})

// stateで保持しているデータを取得するために使用
export const getters = {
  posts: (state) => state.posts
}

// 4. ミューテーションでステートの変更を行う（Mutate）。
export const mutations = {
  setPosts(state, { posts }) {
    state.posts = posts
  }
}

// 2. アクションでWeb APIなどの更新に必要なデータを取得（１）。
export const actions = {
  async fetchPosts({ commit }) {
    const posts = await this.$axios.$get('https://~/wp-json/wp/v2/posts?_embed&tags=6')
    // 3. アクションで取得したデータを状態に反映させるためにミューテーションを実行する（commit）。
    commit('setPosts', { posts })
  }
}

pages/index.vue

<template>
  // 6. 変更されたステートに基づいてコンポーネントが画面を表示（Render）。
  <div>{{ posts }}</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  async asyncData({ store }) {
    // 1. コンポーネントがWebページの更新をするためにアクションを実行する（dispatch）。
    await store.dispatch('fetchPosts')
  },
  computed: {
    ...mapGetters(['posts'])
  },
}
</script>

今回は、直接stateからデータを取得するのではなく、gettersを経由して取得している。

順番がかなり前後しているが、このような流れを意識してVuexストアを記述すると初めてうまくいった。

図解はかなり効果的な定着方法

コードが複雑なればなるほど、頭の中でイメージを膨らませるのでが大切で、頭の中で整理できないものは実際に図などに落とし込みをするのがいいなと感じた。