object in componets и его реактивность

208

25 января 2019, 09:40

Есть задача в компоненте отвязать от store объект. Но так чтобы он в самой компоненте был реактивен.

Если я при создании или монтировании компоненты создаю копию через Object.assign или JSON.parse(JSON.stringify()) то копия образуется, однако данные перестают быть реактивным. Кто как реализовывает данную задачу?

ps. Как вариант, я могу в компоненте объявить в date сам объект и все его свойства пустыми, потом присвоить значения тогда все хорошо работает. Но не удобно когда объект большой, переписывать все его свойства в компоненте, немного не правильно как понимаю.

Answer 1

https://ru.vuejs.org/v2/guide/reactivity.html

Читаем про this.$set

Например ваш случай:

this.$set(this.$data, 'someObject', { key: 'value' })

Answer 2

Для клонирования советую это, JSON не все копирует, а Object.assign не глубоко.

Не совсем понимаю что значит

в компоненте отвязать от store объект.

Если надо чтобы данные брало из store и они были реактивными:

Как вариант, я могу в компоненте объявить в date сам объект и все его свойства пустыми, потом присвоить значения тогда все хорошо работает.

Можно даже так:

  data () {
    // что нужно взять из store
    const fromStore = {
      info: this.$store.state.obj1,
      info2: this.$store.state.obj2
    }
    return {
      ...clone(fromStore),
      // обычное реактивное свойстов
      normalProperty: 'value'
    }
  },

clone - ваша функция клонирования

Но не удобно когда объект большой, переписывать все его свойства в компоненте, немного не правильно как понимаю.

Вроде все правильно. До этого Вы же тоже как-то вставляли данные из store, не думаю что намного больше когда получится.