Как совладать с реактивностью (c передачей по ссылке и глубоким копированием объекта)?

Question

[Artem0071]

Есть некоторый константный блок:

const block = {
  title: '',
  hash: '',
  end: {
    is_end: 0,
    type: 0
  }
}

Так вот, когда создаю объект, делаю примерно следующие:

import empty_block from '../../data/empty_block';
let block = {...empty_block}; // пытаюсь избавиться от реактивности

block.title = this.title;
block.hash = Math.floor(Date.now() / 1000);

this.$store.commit('addBlock', block);

Работает гуд, добавляет нормально все

НО!

Когда пытаюсь изменить объект, то получается что меняются ВСЕ объекты в месте где end{...}!

Причем если я делал пустой блок так:

const block = {
  title: '',
  hash: '',
  is_end: 0,
  type: 0
}

То все работало нормально!!!

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

Comments

[Сергей Соколов]

это не про «реактивность» (что это вообще такое?), а про передачу по ссылке и глубокое копирование объекта.

[Artem0071]

Сергей Соколов, поправил

Answer 1

[Igor Koch]

//let block = {...empty_block};
let block = _.cloneDeep(empty_block);

https://lodash.com/docs/#cloneDeep

Answer 2

[Alexander Kramov]

Самый простой вариант - сделать так, как это рекомендуют разработчики Vue.
В модуле empty_block вместо экспорта объекта можно экспортировать функцию возвращающую объект.

export default function () {
  return {
    title: '',
    hash: '',
    end: {
      isEnd: 0,
      type: 0
    }
  }
}

В других модулях соответственно просто пишешь:

import emptyBlock from 'emptyBlock'
let block = emptyBlock()

Почему у вас объект остаётся реактивно связан, так потому-что объекты в JS передаются по ссылке, а не по значению, соответственно даже если вы пересобрали объект с помощью { ...someObject }, объекты которые содержал someObject остаются теми же и при любой их мутации у всех владельцев ссылки на объект он меняется.

Кстати, хочу отметить, что в JS не принято писать в snake_case, предпочтителен camelCase.

Answer 3

[Evgeny Kulakov]

Можно вот так попробовать:

let block = JSON.parse(JSON.stringify(empty_block))

Comments

[Сергей Соколов]

профукаются методы и наследуюемые свойства.

[Evgeny Kulakov]

Сергей Соколов, есть такое, будет работать только в контексте примера в вопросе.