javascript - Vue - 调度完成后调用 store getter？

Question

我正在使用 Laravel 5.7 + Vue2 + Vuex

我在调度调用完成后让 Vue 返回存储值时遇到一些困难。我的应用程序流程如下所示:

1. 我单击提交按钮，该按钮调用组件上的 validate()。
2. Validate() 分派(dispatch)到我的“addLease”操作，该操作调用 Laravel Controller 中的存储 api。
3. Laravel 验证数据并返回包含错误的响应或成功消息。
4. 然后执行提交，以使用适当的值(或错误，如果表单验证失败)更新leaseStore状态。

我遇到的问题是我只提交了空白表单，因此显然返回了错误，我可以在 Chrome DEV 工具的“网络”选项卡中看到这些错误。一切似乎都工作正常，直到将错误存储在leaseStore状态中。我在控制台中收到以下错误:

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);
      });
     }
   }