Vue в data использовать getter текущего объекта

218
13 ноября 2018, 19:40

Допустим у нас есть такой код

data() {
 return {
  payinRange: window.__DATA__.payinRange,
  payinStruct: window.__DATA__.payinStruct
 }
}

2 раза не очень хочется обращаться к глобальному объекту, по этому я хотел использовать getter и сделать например так:

DATA: window.__DATA__,
get payinRange () { this.DATA.payinRange },
get payinStruct () { this.DATA.payinStruct },

но тогда переопределяется контекст вызова ф-ции и this.DATA уже undefined, есть ли способ присвоить значения в data не обращаясь 2 раза к глобальной переменной?

Answer 1

Нужно инициализировать данные в хуках жизненного цикла Vue, если начальных значений нет можно указать null или пустой строкой '':

// es6 
...
data() {
  return {
    payinRange: null,
    payinStruct: null
  }
}, 
created() {
  // let data = ... // ? но зачем
  // const DATA = window.__DATA__; // ? но зачем
  // Лучше добавить валидацию и предупреждения об ошибках
  // window.__DATA__ = window.__DATA__ || {}
  // this.payinRange = window.__DATA__.payinRange || <default value>
  this.payinRange = window.__DATA__.payinRange 
  this.payinStruct = window.__DATA__.payinStruct
},
...

На заметку: Объект присваивается и копируется «по ссылке». В переменной хранится не сам объект, а адрес в памяти.

Используйте Vuex для управления состоянием приложения.

READ ALSO
При запуске сервера nodejs возникает ошибка
javascript

При запуске сервера nodejs возникает ошибка

Делаю всё по книжке "Стек MEAN" но не получается даже привет экспресс Запустить

 226
Slider Pro вертикальные минатюры
javascript

Slider Pro вертикальные минатюры

как в слайдере Slider Pro сделать вертикальные миниатюры справа как здесь

 207
Проблема при скрытии меню
javascript

Проблема при скрытии меню

есть хедер с меню, при наведении на лишку появляется меню (изменение стейта, свойство isOpen), в меню много li, каждая это запрос по REST на получение...

 210
Увеличить картинку при клике
javascript

Увеличить картинку при клике

 199