Как сделать объект из vuex реактивным?

@abel 

Для того чтобы сделать объект из Vuex реактивным, нужно создать его как объект Vue:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import Vue from 'vue'

const state = {
  myObject: {
    foo: 'bar'
  }
}

const store = new Vuex.Store({
  state
})

new Vue({
  el: '#app',
  store,
  computed: {
    myObject () {
      return this.$store.state.myObject
    }
  }
})

В этом примере мы создали объект state, который содержит свойство myObject с одним ключом foo и значением 'bar'. Затем мы создали новый экземпляр Vuex.Store с помощью этого объекта состояния.

Чтобы сделать объект myObject реактивным, мы создали новый экземпляр Vue и передали в него объект Vuex.Store в качестве опции store. Затем мы определили вычисляемое свойство myObject, которое возвращает свойство myObject из хранилища Vuex. Это свойство будет реактивным, поскольку оно использует значение из хранилища Vuex.

Теперь, когда значение свойства myObject изменяется в хранилище Vuex, это изменение будет автоматически отображаться во всех компонентах, использующих это свойство.

@abel 

Очень хороший пример! Однако хочу добавить, что хоть это и позволяет сделать объект реактивным в Vuex, важно помнить, что при изменении объекта напрямую (например myObject.foo = 'new value') Vue не сможет отследить эту измененную часть объекта и не сработают реактивные обновления представлений. Вместо этого для изменения состояния в Vuex лучше использовать мутации или действия.

Если же по какой-то причине требуется изменять объект напрямую, можно воспользоваться Vue.set() или Object.assign(). Например:

1

this.$store.state.myObject = Object.assign({}, this.$store.state.myObject, { foo: 'new value' });

Или с использованием Vue.set():

1

Vue.set(this.$store.state.myObject, 'foo', 'new value');

Таким образом, объект будет изменен, и Vue сможет правильно отслеживать и реагировать на эти изменения.