Question

我有一个名为activateProgram的Vuex动作，该动作我已调度。我希望在其中设置的状态loadingData设置为true，然后在api请求完成时将其设置为false。我想将此状态用作视图上微调器的标志。这可能吗？

actions: {
    activateProgram: (context, data) => {
        /// SET A ANOTHER STATE RIGHT HERE TO MARK THAT A REQUEST STARTED
        return axios.post(data.url, data.request)
            .then((response) =>
                 /// SET THAT STATE TO FALSE WHEN THE API REQUEST IS FINISHED
                context.commit('toggleProgram', true)
            )
            .catch((error) =>
                context.commit('toggleProgram', false)
            );
    }
 }

Answer 1

以下是从this post借来的相当普遍的模式：

const actions = {
  fetchApiData (store) {  
    // sets `state.loading` to true. Show a spinner or something.
    store.commit('API_DATA_PENDING') 

    return axios.get('someExternalService')
      .then(response => {       
        // sets `state.loading` to false 
        // also sets `state.apiData to response`
        store.commit('API_DATA_SUCCESS', response.data) 
      })
      .catch(error => { 
        // set `state.loading` to false and do something with error   

        store.commit('API_DATA_FAILURE', error)
      })
    }
}

将loading标志添加到您的状态。将loading和toggleProgram突变分组在一起可能是有意义的。 “待定”突变可以将loading切换为true，而“成功”和“失败”提交将把loading设置为false并根据需要改变程序状态

对每个ajax帖子执行此操作可能会很烦，因此下一步可能是add an abstraction。

Vue：是否可以在Vuex动作中设置其他状态？

1 个答案: