Vue - Вызов магазина получателя после отправки?

Question

Я использую Laravel 5.7 + Vue2 + Vuex

У меня возникают трудности с получением Vue для возврата значения хранилища после завершения моего вызова диспетчеризации.Мой поток приложений выглядит следующим образом:

1. Я нажимаю кнопку отправки, которая вызывает validate () для компонента.
2. Validate () отправляет моему действию "addLease", которое вызывает API-интерфейс хранилища в контроллере Laravel.
3. Laravel проверяет данные и возвращает ответ с ошибками или сообщение об успехе.
4. Затем выполняется фиксация, чтобы обновить состояние leaseStore с соответствующим значением (или ошибкой, если проверка формы не удалась).

У меня проблемы с отправкой, я просто отправляюпустая форма, поэтому очевидно, что возвращаются ошибки, которые я вижу на вкладке Сеть инструментов Chrome DEV.Кажется, что все работает нормально, пока не доходит до хранения ошибок в состоянии аренды.Я получаю следующую ошибку в консоли:

Uncaught (in promise) TypeError: Cannot read property 'leaseStore' of undefined

Возможно, мне не хватает чего-то маленького, но я не могу понять, в чем проблема.Я думаю, что может быть проблема при попытке передать значение ошибки в состояние leaseStore, но я не уверен.

Вызов API:

postLeaseStore: function(data){
    return axios.post('/api/lease',
        data
    );
}

Действие:

addLease({ commit, state }, data) {
    commit('setLeaseStore', 0);

    LeaseAPI.postLeaseStore(data)
    .then( function( response ) {
        console.log('Success');
        commit('setLeaseStore', 1);
    })
    .catch( function(error) {
        console.log('Error');
        return commit('setLeaseStore', 3);
    });
}

Vue Компонент:

computed: {
    leaseStore() {
        return this.$store.getters.getLeaseStore;
    }
},
methods: {
    validate()
    {
        this.$store.dispatch('addLease', this.input).then(function () {
            console.log(this.leaseStore);
        });
    }
}

Answer 1

Вы теряете область действия this (экземпляр Vue) внутри вашего обратного вызова, чтобы исправить это, используйте функцию стрелки ()=>, например:

    methods: {
     validate()
       {
       this.$store.dispatch('addLease', this.input).then(()=> {
        console.log(this.leaseStore);
      });
     }
   }