在 axios 之后将信息从 Vuex 模块传递到组件答案

【问题标题】：Passing info from Vuex module to component after axios在 axios 之后将信息从 Vuex 模块传递到组件
【发布时间】：2019-07-15 00:34:24
【问题描述】：

我正在尝试创建基于 Vue.js 的应用程序。这是我的场景。我有一个组件，其中有一个弹出窗口来创建一个“费用”条目。单击“保存”按钮时，我调用 Vuex 模块中定义的函数，该函数处理 api 调用以保存条目。像这样

import { mapActions } from 'vuex';

export default {
    name : 'CreateExpense',
    data(){
        return {
            expense : {
                expense : null,
                amount : 0,
                comment : null
            }
        }
    },
    methods : {
        ...mapActions(['addExpense']),
        saveExpense(){
            this.addExpense( this.expense );
        }
    }
}

我的 vuex 模块有这个

const actions = {
    addExpense({commit},expense){
        axios.post( env.API_URL + 'save-expense',expense)
        .then( response => commit('addExpense',expense) )        
    }
};

我的问题是我无法弄清楚如何将信息传递给该 api 调用已完成并更新费用状态对象的组件，以便它可以关闭在那里打开的弹出窗口。我希望 .catch/.then 在模块本身而不是组件中处理，并且在组件中，只需关闭弹出窗口+一些警报消息。请指点我的方向

【问题讨论】：

标签： javascript vue.js axios vuex

【解决方案1】：

使用mapGetters


import { mapActions, mapGetters } from 'vuex';

export default {
    name : 'CreateExpense',
    data(){
        return {
            expense : {
                expense : null,
                amount : 0,
                comment : null
            }
        }
    },
    methods : {
        ...mapActions(['addExpense']),
        saveExpense(){
            this.addExpense( this.expense );
        }
    },
    computed: {
        ...mapGetters(['expense'])
    },
    watch: {
      expense (val) {
        if (val) //close popup modal
      }
    }
}

store.js

export default new Vuex.Store({
  actions: { ... },
  state: { ... },
  getters: {
    expense: ({expense}) => expense
  }
}

【讨论】：

【解决方案2】：

交替（无 mapGetters）

在您的商店中：

addExpense ({commit}, expense) {
  return new Promise ((resolve, reject) => {
    axios.post(env.API_URL + 'save-expense', expense)
    .then(response => {
      commit('addExpense', expense);
      resolve(response); // THIS WILL RETURN TO YOUR COMPONENT
    })
    .catch(err => {
      reject(err);
    })
  })
}

在你的组件中：

mounted: function () {
  this.myMethod()
},

methods: {
  myMethod: function () {
    this.$store.dispatch('addExpense')
    .then(response => {
      console.log('response', response) // SHOULD GET VALUE FROM RESOLVE
    }) 
  }
}

【讨论】：