Vuex嚴格模式拋出異常，同時更新嵌套數組

我有一個頁面，用戶可以編輯多個段。每個片段都有一個名稱和一個可以添加/刪除的過濾器數組。Vuex嚴格模式拋出異常，同時更新嵌套數組

{ 
    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.錯誤。我知道爲什麼，因爲無論我通過組件屬性傳遞過濾器數組多少次，它們仍然保持被動狀態，並且它們在Filters組件中的更改傳播到發出錯誤的vuex存儲區。

，也同樣可以在輸入部分名稱。但是如何在文檔中處理表單就是一個例子。

但我怎麼可以讓過濾器的工作？爲過濾器製作單獨的商店？但這將是一個爛攤子，因爲會有多個段與頁面上自己的過濾器......我被困:(

來源

2016-09-29 Maxim Lanin

我認爲你應該發送一個事件來提示刪除。 –

，以及我從vuex回購本身的談話，只有這樣理解並最好的決定是深克隆filters數組，然後只是把它作爲一個局部變量。

它必須這樣做，因爲在JS數組總是引用和深克隆通過從一個在vuex解除綁定我filters陣列

這可以通過JSON.parse(JSON.stringify()),_.cloneDeep()或任何其他類似的方法來實現

來源

2016-09-30 07:13:28

Vuex嚴格模式拋出異常，同時更新嵌套數組

回答

相關問題