入れ子配列を更新中にVuex strictモードが例外をスローする

Question

複数のセグメントを編集できるページがあります。すべてのセグメントには名前と追加/削除できるフィルタの配列があります。

{ 
    segments: [ 
    { 
     name: 'Mac', 
     filters: [ 
     { 
      field: 'os', 
      value: 'mac' 
     }, 
     { 
      field: 'browser', 
      value: 'chrome' 
     } 
     ] 
    } 
    ] 
} 

Index.vue

<template> 
    <div class="segments"> 
    <segment 
     v-for="segment in segments" 
     :id="segment.id" 
     :name="segment.name" 
     :filters="segment.filters"> 
    </segment> 
    </div> 
</template> 

<script> 
import Segment from './Segment' 
export default { 
    vuex: { 
    getters: { 
     segments 
    } 
    }, 
    components: { 
    Segment 
    } 
} 
</script> 

Segment.vue

<template> 
    <div class="segment"> 
    <input type="text" class="name" v-model="name" /> 
    <filters :filters="segment.filters"></filters> 
    <button @click="saveSegment()">Save</button> 
    </div> 
</template> 

<script> 
import Filters from './Filters' 
export default { 
    props: ['id', 'name', 'filters'], 
    vuex: { 
    methods: { 
     updateSegment({dispatch}, id, segments) { 
     dispatch(SEGMENT_UPDATE, id, segment) 
     } 
    } 
    }, 
    methods: { 
    save() { 
     this.updateSegment(this.id, { 
     name: this.name, 
     filters: this.filters 
     }) 
    } 
    } 
} 
</script> 

Filters.vue

<template> 
    <ul class="filters"> 
    <li v-for="filter in filter"> 
     {{ filter.name }} <button @click="remove($index)">Remove</button> 
    </li> 
    </ul> 
</template> 

<script> 
export default { 
    props: ['filters'], 
    methods: { 
    remove (index) { 
     this.filters.splice(index, 1) 
    } 
    } 
} 
</script> 

フィルタを削除するたびに、Do not mutate vuex store state outside mutation handlers.エラーが発生します。なぜなら、何度もコンポーネントのプロパティを介してフィルタ配列を渡すにしても、それらは依然として反応性があり、フィルタコンポーネントの変更はエラーをスローするvuexストアに伝播するからです。

入力にセグメント名を使用します。しかし、ドキュメントにフォームを扱う方法の例があります。

しかし、フィルタはどのように動作させることができますか？フィルター用に別々の店舗を作る？しかし、それはページ上に独自のフィルタを持つ複数のセグメントがあるので...私はつまらない:(

Answer 1

私はvuexレポ自体の会話から理解している、唯一の方法と

JSの配列は常に参照渡しであり、ディープクローンは私のfilters配列をvuexの配列からアンバインドするので、これを行う必要があります

これは、JSON.parse(JSON.stringify()),_.cloneDeep()または他の任意の類似方法によって達成することができる。