Vue devtools обновляется, но компонент не

Question

В моем компоненте у меня есть:

currentItem.recipe

currentItem - это состояние в vuex, инициируемое как объект:

currentItem: {} 

В том же компоненте я импортирую его с mapState:

...mapState('ItemStore', [
      'currentItem'
])

Когда я добавляю рецепт для него, эта мутация вызывается:

ADD_ITEM_RECIPE: (state, recipe) => {
   state.currentItem.recipe = recipe
}

recipe - это ответ от сервера на пост-запрос на создание нового рецепта.

В моем компоненте у меня есть v-if="currentItem.recipe", который в начале равен false, поскольку currentItem не имеет recipe

Мутация выполняется, в devtools я вижу, как recipe добавляется к currentItem. Но компонент не обновляется. v-if не меняется на true. В devtools, если я фиксирую мутацию вручную, она работает как ожидалось.

Поэтому я попытался изменить мутацию на:

state.currentItem.recipe = Object.assign({}, state.currentItem.recipe, recipe)

, но проблема все еще существует.

Почему это происходит и как я могу это решить?

Answer 1

Попробуйте переписать весь объект:

ADD_ITEM_RECIPE: (state, recipe) => {
   state.currentItem = {...state.currentItem, recipe: recipe}
}

Answer 2

Вы добавляете новый ключ к существующему объекту, и поэтому реактивность на него не работает.

@ HansFelixRamos ответ верен, но у вас есть и другие альтернативы.

1. Ты Object.assign близко, но без сигары. Вам необходимо обновить весь объект.

   state.currentItem= Object.assign({}, state.currentItem, {recipe})

   Это добавит recipe к новому объекту при поверхностном копировании всей информации из state.currentItem.

2. Другой подход заключается в объявлении recipe объекта состояния с самого начала.

state: {
 currentItem: {
  //other properties 
  recipe: false // or null, or undefined
 }
}

Я думаю, что второй подход более подходит, особенно для более длительного путь объекта. Если вы объявляете значения по умолчанию для всех ключей, вам не нужно писать защитный код, подобный этому const val = obj && obj.path1 && obj.path1.path2 && obj.path1.path2.path3, чтобы получить доступ к глубоко вложенным свойствам.