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

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/.then 在模块本身而不是组件中处理，并且在组件中，只需关闭弹出窗口+一些警报消息。请指点我一些方向

标签： javascriptvue.jsaxiosvuex

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