@Artem0071
Безработный mr. Junior

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

Есть некоторый константный блок:
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
}


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

Я просто уже не знаю что делать...
хелп ми плиз добрые люди, скажите как избавиться от реактивности где она не нужна
  • Вопрос задан
  • 238 просмотров
Решения вопроса 1
nexmean
@nexmean
погромист
Самый простой вариант - сделать так, как это рекомендуют разработчики 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.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
amux
@amux
alp.ac
//let block = {...empty_block};
let block = _.cloneDeep(empty_block);

https://lodash.com/docs/#cloneDeep
Ответ написан
Комментировать
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Можно вот так попробовать:
let block = JSON.parse(JSON.stringify(empty_block))
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы