検討中の内容をまとめた。
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
}