Vuex ошибка мутации, когда передача объекта (с объектами) к компоненту

Question

Описание (Tl; д-р):

Когда я передать «объект объектов» от магазина vuex к компонентам через v-model, модификации от модели производят ошибку. Только, когда «Объект объектов» прошел. С любым другим типом все в порядке.

Когда я сказал «Объект объектов», я имею в виду эту структуру: {'A': {name: 'first'}, 'B': {name: 'second'}}.

Workflow и structire:

• Структура: view (page) ->parent ->child;
• Просмотреть Получите Object из магазина и передайте его на компоненты (->parrent ->child);
• Нет «.sync» разрешено, поэтому компоненты не должны мутировать объект в магазине;
• После изменений в child, child придется возвращать результат parent, parent на view и view должны сохранить его с помощью сеттер vuex в;

Сообщение об ошибке:

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'}} 

View (страница):

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

P.S. Я предполагаю, что проблема возникает из-за того, что объекты переданы по ссылке. Но как бороться с этой ошибкой?

Answer 1

В основном только 2 варианта:

1. пропускам DeepCopy объекта к props;
2. Использование @input события или v-model с вычисленными опорами (как в ответе pkawiak https://stackoverflow.com/a/39249362/930170);

Я предпочитаю использовать deepcopy, в то время как я уверен, что объект не слишком большой. Этот подход помогает сохранить код более чистым и намного проще в обслуживании.

Второй подход только в тех случаях, когда ожидается объект чертов-большой

Answer 2

Взгляните на документы Vuex form handling. Он рекомендует, используя @input событие или v-model с расчетным реквизитом ...

Предполагая, что OBJ является вычисляемым свойством, которое возвращает объект из магазина, v-модель здесь будет пытаться непосредственно мутировать obj.message, когда пользователь на входе. В строгом режиме это приведет к ошибке, потому что мутация не выполняется внутри явного обработчика мутации Vuex.