将信息从vuex模块传递到Axios之后的组件

Question

我正在尝试创建基于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/。然后在模块本身而不是组件中处理。请把我指向某个方向

Answer 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
  }
}

Answer 2

交替（sans 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
    }) 
  }
}