Question

我正在使用Laravel 5.7 + Vue2 + Vuex

在我的调度调用完成之后，我很难让Vue返回存储值。我的应用程序流程如下：

我单击一个提交按钮，该按钮在组件上调用validate（）。
Validate（）分派给我的“ addLease”操作，该操作在Laravel控制器中调用商店api。
Laravel验证数据并返回带有错误的响应或成功消息。
然后执行一次提交，以使用适当的值（或如果表单验证失败，则为错误）更新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);
      });
     }
   }

Vue-分派完成后致电商店getter吗？

1 个答案: