vuex の $store にある配列を操作すると怒られる(半解決)

(旧題 : vuex の $store に直接値をぶっこむと怒られる )

だめな例

export const state = () => ({
  arr: [],
})

export const mutations = {
  setArr (state, { arr }) {
    state.arr = arr
  }
}

export const getters = {
  arr (state) {
    return state.arr
  }
}

なんも考えずにこう書いてしまうと怒られてしまう

Error: [vuex] do not mutate vuex store state outside mutation handlers.

なんでやねん。ちゃんとmutationの中で更新してるがな。と思いながらウンウン唸ってたんです。
当たり前だけどこういうコードは通る。

export const state = () => ({
  obj: {},
})

export const mutations = {
  setHoge (state, { hoge }) {
    state.obj.hoge = hoge
  }
}

なんとなーくなんだけど、これ オブジェクトの参照が変わるような代入が許されない んじゃないかなーと予想。たしかに後から引数に使われたオブジェクトに変更が加わると store の中身が変更されてしまう 可能性 がある。
(いや、後者のコードでも十分にありえるんだけど、それを制限/検知するのは技術的に不可能なんだろうなーと。)

やっぱりだめな例

というわけで以下のようにコードを変更

export const state = () => ({
  arr: [],
})

export const mutations = {
  setArr (state, { arr }) {
    // 配列の中身を全て消去
    state.arr.splice(0)
    // 引数で渡された配列をまるごとpush
    state.arr.push(...systems)
  }
}

export const getters = {
  arr (state) {
    return state.arr
  }
}

Error: [vuex] do not mutate vuex store state outside mutation handlers.

なんでーーーーー????
公式ページに書いてあることと同じ事しかしてないよーーーーー????

結局

nuxtのissueにこんな解決方法が書いてありました。

export const strict = false // <- これ!!!!!
export const state = () => ({
  arr: [],
})

export const mutations = {
  setArr (state, { arr }) {
    // 配列の中身を全て消去
    state.arr.splice(0)
    // 引数で渡された配列をまるごとpush
    state.arr.push(...systems)
  }
}

export const getters = {
  arr (state) {
    return state.arr
  }
}

うーん……なんかコレジャナイ感があるんだよなぁ……
だって公式のガイドと同じ事して怒られるんだよ……?多分もっといい解決方法があるはず……