Vue：是否可以在 Vuex 动作中设置另一个状态？答案

【问题标题】：Vue: Is it possible to set another state inside a Vuex action?Vue：是否可以在 Vuex 动作中设置另一个状态？
【发布时间】：2020-03-19 09:30:47
【问题描述】：

我有一个名为 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)
            );
    }
 }

【问题讨论】：

尝试一下会比写这个问题要快。您是否遇到过具体问题？
是的，有可能:-)
@Nit 好吧，我想问更多这是否与 Vuex 一致——我的意思是，我知道只要在此处设置状态在技术上是可行的，但这是首选方式还是一种哈克解决方案

标签： vue.js vuex

【解决方案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。

【讨论】：

甜，这个解释正是我想要的。谢谢！