Le mode strict Vuex lève une exception lors de la mise à jour du tableau imbriqué

Question

J'ai une page où l'utilisateur peut modifier plusieurs segments. Chaque segment a un nom et un tableau de filtres qu'il peut ajouter/supprimer.

{ 
    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> 

Chaque fois que je supprime un filtre, j'obtiens l'erreur Do not mutate vuex store state outside mutation handlers.. Et je sais pourquoi, car peu importe le nombre de filtres que je passe dans les propriétés des composants, ceux-ci restent réactifs et leur changement dans le composant Filters se propage jusqu'au magasin vuex qui génère une erreur.

Il en sera de même avec les noms de segments dans les entrées. Mais il existe un exemple de gestion des formulaires dans docs. Mais comment puis-je faire fonctionner les filtres?

Faire des magasins séparés pour les filtres? Mais ce sera un gâchis car il y aura plusieurs segments avec leurs propres filtres sur la page ... Je suis coincé :(

Answer 1

Ainsi que j'ai compris de la conversation dans le repo de vuex lui-même, la seule façon et la meilleure décision est de clone profond du tableau filters puis il suffit d'utiliser comme une variable locale.

il doit être fait parce que les tableaux de JS toujours passés par référence et clone profond délie mon tableau filters de celui du vuex

Ceci peut être réalisé par JSON.parse(JSON.stringify()), _.cloneDeep() ou par tout autre méthode similaire