Как сделать объект из vuex реактивным?
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 ,
4 месяца назад
@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.
|
15