Как добавить слепок текущего состояния?

Question

[tenaro]

В store vuex:

const state = {
  filter_list: [], - тут хочу хранить слепки
  filter: { - текущие состояние 2х инпутов, связано через v-model
	input1:'',
	input2:''
  }
}

Хочу по кнопке сохранять текущее значение filter как новый элемент filter_list.

В мутации как-то так:

FILTER_SAVE (state) {
  state.filter_list.push({filter: state.filter})
}

Проблема в реактивности, при изменении текстов в инпуте, меняются старые записанные объекты.

Как это правильно организовать? Реальная задача - дать пользователю сохранять свои фильтры.

Comments

[alex]

здесь дело не в реактивности, а в том что в js объекты передаются по ссылке. поэтому вам надо сначала скопировать state.filter, и затем эту копию пушить

[tenaro]

тут все для примера упрощено,
let controls = JSON.parse(localStorage['app']).main.filter.controls
state.filter.list.push({id: state.filter.list_last_id, name: name, controls:controls})
последние извращения, но результат тот же

[tenaro]

при добавлении по индексу, при использовании объекта вместо массива тоже самое

[alex]

tenaro, честно, я ничего непонял

Answer 1

[0xD34F]

Проблема в реактивности, при изменении текстов в инпуте, меняются старые записанные обьекты

Ну да, ну да. Вот так и получается: JS не учи, фреймворки используй.

Сохраняйте копию вместо оригинала. Типа так:

state.filter_list.push({ ...state.filter })

Это если объект плоский. Если есть вложенность, используйте _.cloneDeep, например (или какой-либо иной аналог, или сами можете попробовать реализовать рекурсивную функцию копирования).

Comments

[Алексей Ярков]

JS не учи, фреймворки используй

Очень точно подмечено ))

[Ilya]

Алексей Ярков, увы, но это бич современного фронтенда

[Сергей delphinpro]

Алексей Ярков, Ilya, вы бы жмякнули синюю кнопочку =)
а то автор решением отметил фигню какую-то

Answer 2

[Alex]

Или так:

state.filter_list.push( JSON.parse(JSON.stringify(state.filter)) )