javascript - オブジェクト (オブジェクトを含む) をコンポーネントに渡すときの Vuex ミューテーション エラー

Question

説明(tl;dr):

を介して vuex のストアからコンポーネントに「オブジェクトのオブジェクト」を渡すv-modelと、モデルの変更でエラーが発生します。「オブジェクトのオブジェクト」が渡された場合のみ。他のタイプでは、すべて問題ありません。

「オブジェクトのオブジェクト」と言ったとき、私はこの構造を意味します: {'A': {name: 'first'}, 'B': {name: 'second'}}.

ワークフローと構造:

• 構造: view (page)-> parent-> child;
• ビューObjectからストアを取得し、それをコンポーネントに渡します (-> parrent-> child);
• " .sync" は許可されていないため、コンポーネントはストア内のオブジェクトを変更してはなりません。
• の変更後、結果を 、 に返すchild必要があり、vuex のセッター経由で保存する必要があります。childparentparentviewview

エラーメッセージ:

Error when evaluating setter "value.name": Error: [vuex] Do not mutate vuex store state outside mutation handlers. (found in component: <child>)

Getter (ストアから) :

getObjFromStore // return {'A': {name: 'first'}, 'B': {name: 'second'}}

ビュー (ページ) :

<parent :value="getObjFromStore"></parent>

親コンポーネント:

<template>
  <div v-for="v in value">
    <child :value="v"></child>
  </div>
</template>

<script>
  import Child from 'components/child'

  export default {
    data () {
      return {}
    },
    props: {
      value: {
        type: Object
      }
    },
    components: {
      Child
    }
  }
</script>

子コンポーネント:

<template>
  <input type="text" v-model="value.name">
</template>

<script>
  export default {
    data () {
      return {}
    },
    props: {
      value: {
        type: Object
      }
    }
  }
</script>

PSオブジェクトが参照渡しされたため、問題が発生したと思います。しかし、このエラーと戦う方法は?