検討中の内容をまとめた。
storeの記述は可能な限りシンプルに、複雑さはコンポーネントに押し込める事を基本とする。
モチベ
処理をstoreに寄せるとstoreが膨らむ。どのviewに影響するか分からない処理で膨らんだstoreはリーディングコストが高い。
複雑化したコンポーネントを捨てるのは影響範囲が限定されるが、複雑化したstoreはアプリ全体に影響を及ぼすため安易に改修出来ない。
手が入れ辛い方から複雑性を排除したい。
思考実験段階のため、実情に即して随時修正加筆を行う。
stateのコンポーネントでの利用単位ごとにgettersを作成する
mapStateは用いない
全てmapGettersで行う
gettersは抽出のみとする
抽出以上の表示用データ整形はコンポーネント側で行う
コンポーネントとの密結合を避ける目的
store moduleは独立させる
module間の伝達は行わない
複数moduleにまたがるstore管理は人類には容易でない
ひとつのmutationsはひとつのstateを更新するのみとする
複数のstateを更新しない
mutations内でデータ加工を行わない
コンポーネントからmutationsを直接叩かない 必ずactionsを経由させる
mutationsひとつに対しactionsひとつを基本とする
コンポーネントから叩いてよい
必要であれば非同期処理を書いてよい
複数mutationsをcommitしない
actionsに複雑な処理は書かない
事情により必要な場合はstore外に切り出した関数をactions内で呼び出す形とする
actionsでのデータ整形は最小限にとどめる
payloadのデータ整形はコンポーネントで行う
2つ以上のコンポーネントで共通して用いるデータ整形があればstore側に置いてもよい
ただしstoreの外に定義し呼び出す形とする
※store/module/helpers.js等が考えられる
※本記事でいうstore外に定義とは以下のsomeHelperのような形を指す
actionsやgettersとは独立して定義する
js
// helpers.js
const someHelper = () = {
// ... some functions
return someData
}
// store.js
import { someHelper } from './helpers.js'
const state = {}
const getters = {}
const mutations = {}
const actions = {}
export default {
state,
getters,
mutations,
actions
}