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

Пользователь

от velma , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от josie , год назад

@velma 

Для того чтобы сделать объект из Vuex реактивным, можно использовать функцию Vue.set().


Например, если у нас есть объект myObject в Vuex, мы можем сделать его реактивным, вызвав функцию Vue.set() с объектом состояния Vuex и ключом, который соответствует нашему объекту. Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    myObject: {
      name: 'John',
      age: 30
    }
  }
})

// Сделаем myObject реактивным
Vue.set(store.state, 'myObject', store.state.myObject)


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

Пользователь

от cloyd , 5 месяцев назад

@velma 

Также существует другой способ сделать объект из Vuex реактивным, используя оператор расширения объекта spread (ES6). Вместо функции Vue.set() мы можем просто переназначить объект в состоянии Vuex, чтобы сделать его реактивным. Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    myObject: {
      name: 'John',
      age: 30
    }
  }
})

// Сделаем myObject реактивным
store.state.myObject = { ...store.state.myObject }


При использовании этого подхода, объект myObject также станет реактивным и изменения будут отслеживаться автоматически. Обратите внимание, что вам необходимо использовать синтаксис ES6, чтобы использовать оператор расширения объекта spread.