Vuexでストアを管理していると、アプリケーションが大きくなるにつれてストアが肥大化し、見通しが悪くなる問題が起こります。 それを回避するためにストアを分割できるようになっています。例えばアプリケーションの機能ごとやページごとにストアを分割して…

前回、Vuexのミューテーションについて説明しましたがミューテーションは以下のルールがあります。 ミューテーションハンドラ関数は同期的でなければならない つまりミューテーションでできるのは同期処理のみで、非同期処理はできません。そのため実際に使…

ミューテーションはVuexのストアの状態を変更したいときに使うもので、分かりやすくいうとハンドラに近いものです。 使い方と特徴がいくつかあるので以下にまとめます。 ミューテーションはタイプとハンドラを持っています ハンドラみたいなものなので直接使…

Vue.jsには算出プロパティがありますが、Vuexではそれと同じことをgettersを用いて行います。 設定方法は以下のようにgettersの中に好きなgetterを追加していきます。 state: { hoge: 10 } getters: { aaa: aaa(state) { return state.hoge } } getterは必ず…

Vue.jsを使用するときに、アプリケーションの状態を管理するためにVuexを使うことがほぼだと思いますので、これから何回かに渡ってVuexについての基本的な使い方をまとめようと思います。 今回はVuexについて少し触れて、あとはステートについてまとめようと…

前回の配列操作でよく使うメソッドまとめ04つづき。 今回も前回までと同じJSONデータを使ってfindの使い方についてまとめます。 JSONデータの中身は配列操作でよく使うメソッドまとめ01のページ下部に載っています。 findを使えば引数で与えた関数に一致する…

前回の配列操作でよく使うメソッドまとめ03つづき。 今回も前回までと同じJSONデータを使ってObject.assignの使い方についてまとめます。 JSONデータの中身は配列操作でよく使うメソッドまとめ01のページ下部に載っています。 Object.assignを使えば簡単に対…

前回の配列操作でよく使うメソッドまとめ02つづき。 今回も前回までと同じJSONデータを使ってfilterの使い方についてまとめます。 JSONデータの中身は配列操作でよく使うメソッドまとめ01のページ下部に載っています。 各チームのUS出身の選手のみ取り出す i…

前回の配列操作でよく使うメソッドまとめ01つづき。 今回は前回のJSONデータを使ってsortの使い方についてまとめます。 JSONデータの中身は前回のページ下部に記載しています。 各チームの選手を年齢順にソート import data from '../EasternConference.json…

仕事で配列を扱うことが多くなったので配列の操作方法をまとめました。 現場ではAPIで取得したデータをフロント側で扱いやすいようにJSONにパースしたり加工することが多いと思うので、今回は基本的な計算処理についてまとめます。 今回は実際にNBAの複数の…