Данные Vue.js недоступны в созданном() функции

Question

У меня возникли проблемы с инициализацией моего компонента Vue данными из localStorage. Вот упрощенная версия моего кода

new Vue({ 
    el: "#my-element", 
    created:() => { 
     if (window.localStorage.getItem("verified")) { 
      this.verification.verified = true; 
     } 
    }, 
    data: { 
     verification: { 
      verified: false 
     } 
    } 
}); 

Но я получаю сообщение об ошибке на консоли Cannot read property 'verification' of undefined

Если я ставлю debugger в функции создания(), и проверить значения из this, this.verification и this.verification.verified, все они настроены на значения, которые я инициализировал в объекте данных.

Может кто-нибудь объяснить, что я делаю неправильно?

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

Answer 1

Хорошо, я выяснил проблему. Это потому, что я использую нотацию ES2015 для функций. Переход на function(){} позволяет ему снова работать. Поэтому мне нужно сделать еще несколько исследований, чтобы выяснить, как использовать ES2015 с Vue.js

Answer 2

Функция стрелки предназначена для использования, если вы хотите, чтобы значение this во внешнем контексте втекало в тело вашей функции, а не функцию, имеющую свой собственный контекст для this. Это означает, что this в вашей функции created не указывает на ваш экземпляр Vue.

Вы можете, однако по-прежнему использовать сокращенный синтаксис метода декларации, предоставляемой ES6:

new Vue({ 
    created() { 
     // ... 
    } 
});