未分類

nuxt do not mutate vuex store state outside mutationエラーの原因と解決方法

Nuxtでアプリを作成していたとき、標記のエラーが出た。

しかし、stateのデータはきちんとmutationで変更している。

だから、なぜこのエラーが出ているのか分からず沼にハマった。

先に原因を書いておくと、dataで定義していたオブジェクトthis.allArticleDataSorted[i]を参照渡しにてmutationに渡し、そこでstateのオブジェクトstate.stockedArticlesに代入してしまったためだ。

このthis.allArticleDataSorted[i]はv-modelによって参照されている。

これにより、vueファイル側にてthis.allArticleDataSortedが変更された瞬間に、state.stockedArticlesのデータも書き換わるので、標記のエラーが出てしまう。

<vueファイル>

this.$store.commit(‘persistedParameter/changeStockedArticles’,this.allArticleDataSorted[i]);

<jsファイル>

changeStockedArticles(state, element){

state.stockedArticles.push(element);

}

 

 

解決策としては、mutationに渡したいデータthis.allArticleDataSortedのコピーをとり(Object.assignで)、そのコピーをmutationに渡して更新するようにしたら、エラーが解決された。

参考記事

今回のエラーの解決方法は、以下の記事に分かりやすく説明されている。

https://omiend.hatenablog.jp/entry/2019/05/25/233836

関連情報

Object.assign

https://arrown-blog.com/js-object-assign/

js教科書のp260

シャローコピーとディープコピー

js教科書のp260

export const strict = false

https://www.mk-tool.work/entry/2018/07/19/224457

反省

javascriptの参照渡しの概念がすっかり頭から抜け落ちていたために、エラーの原因にすぐに気付けず時間を浪費してしまった。

さらに、v-modelの理解も足りないので、vueやjsの書籍にて該当箇所を復習すること。