Vuexを少しだけ拡張して使ってみた #JavaScript

はじめに

「公式ドキュメントを読むのはいいけど、本質を理解して自分なりに実装するよう意識しないと伸びないよ。」

先輩エンジニアに言われて、グザっと刺さるフレーズをご紹介します。

今回は「Vuexの基本は学習しました！」というエンジニア向けに、こんな使い方もできますよというサンプルを提示できたらいいなと思って記事を書きます！
※Vue3になってpiniaを利用する方も多いかと思いますが、通ずる話かと思います

稚拙なところも多々ありますが、一読いただけると幸いです！

State

stateはVuexの中核を担うものですが、文字列や数値、空の配列のみ定義しなければならないわけではありません。
必要なデータはひとまとまりにすると参照する際もデータを更新する際も楽なことがあります(Vuexに限らずですがね)。

state = () => ({
  // 基本的な書き方
  base: '',
  count: 0,
  // まとまった方が使用しやすい場合は、オブジェクトなどで定義してあげると後ほど楽になる
  blogPost: {
    title: '',
    content: '',
    tags: [],
    type: 0,
  }
})

Getters

gettersでは、stateを複数のデータを保持するプロパティを作成したことで、特定の属性だけでなく、まとまった情報を取得する事もできます。

getters = {
  base: state => state.base,
  count: state => state.count,
  // 複数のデータを返すことができる
  blogInfo: state => state.blogPost,
  // こんな感じで複数のデータを返す事も
  systemInfo: state => {
    base: state.base,
    count: state.count
  }
}

Mutations

mutationでは、複数のデータを更新することができるように設計します。特定の属性だけを更新する場合でも、このmutationを再利用することができます。
payloadはオブジェクトにするのがミソです。

mutations = {
  setBase(state, payload) {
    state.base = payload
  },
  setCount(state, payload) {
    state.count = payload
  },
  // payloadをオブジェクトにすることで、複数の値を一気にセットできる
  setBlogInfo(state, payload) {
    state.blogPost.title = payload.title
    state.blogPost.content = payload.content
    state.blogPost.tags = payload.tags
    state.blogPost.type = payload.type
  },
  // 場合によっては、まとめてにセットすることもできる
  setBlogInfo(state, payload) {
    state.blogPost = { ...state.blogPost, ...payload }
  }
}

Actions

actionsでは、各コンポーネントから指定されたデータを更新するだけでなく、APIから取得したデータでブログ投稿を更新したり、ユーザーの操作に応じて特定の属性を更新したりします。

actions = {
  updateBlogInfo({ commit }, payload) {
    commit('setBlogInfo', payload);
  },
  updateBlog({ commit, getters }, blogInfo) {
    const currentBlogInfo = getters.blogInfo;
    commit('setBlogInfo', { ...currentBlogInfo, title: newTitle });
  },
  async fetchBlogPost({ commit }) {
    try {
      const response = await this.$axios.$get('/api/blog/post');
      commit('setBlogInfo', response.data);
    } catch (error) {
      console.error('Error fetching blog post:', error);
    }
  },
}

ざっくりですが、こんな感じで使用することもできます！
Vuex以外にも様々な機能がありますが、基本を理解したらどのように利用するか、どのように利用したら有効活用できるかは意識していきたいなと思ってます。

最後になりますが、良い１年をお迎え下さい！