Передача информации из модуля Vuex компоненту после axios - PullRequest
Новая
       8

Передача информации из модуля Vuex компоненту после axios

0 голосов
/ 21 февраля 2019

Я пытаюсь создать приложение на основе 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 обрабатывались в самом модуле, а не в компоненте, и в компоненте, просто закрывая всплывающее окно + какое-то предупреждающее сообщение.Пожалуйста, укажите мне в каком-то направлении

1 Ответ

0 голосов
/ 21 февраля 2019

использование 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
  }
}
...