Строгий режим Vuex выдает исключение при обновлении вложенного массива

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.. И я знаю, почему, потому что независимо от того, сколько раз я пропускаю фильтр через свойства компонентов, они по-прежнему остаются реактивными, а их изменение в компоненте Filters распространяется до хранилища vuex, которое вызывает ошибку.

То же самое будет с названиями сегментов в входах. Но есть пример, как обрабатывать формы в документах.

Но как я могу заставить фильтры работать? Сделать отдельные хранилища для фильтров? Но это будет беспорядок, потому что на странице будет несколько сегментов со своими фильтрами ... Я застрял :(

Answer 1

Как я понял из беседы в самом реестре vuex, единственный способ и лучшее решение для глубокого клонировать filters массив, а затем просто использовать его в качестве локальной переменной.

это должно быть сделано, потому что массивы в JS всегда передаются по ссылке и глубокий клон отвязывает мой filters массив из одного в vuex магазин.

Это может быть достигнуто путем JSON.parse(JSON.stringify()), _.cloneDeep() или любой другой similarmethod.