Реализовать всплывающее окно после успешной публикации аксиоса - PullRequest
0 голосов
/ 20 мая 2019

У меня есть действие

storeExpense(context, params){
    axios.post('api/expenses', params)
    .then( response => {
        context.dispatch('getExpenses')
    })
    .catch( error => {
        context.commit('errors', error.response.data.errors)
        //console.log(error.response.data.errors);
    })
}

и затем на моем компоненте, когда пользователь нажимает кнопку отправки, я только что вызвал действие через диспетчерскую

store(){
    this.$store.dispatch('storeExpense',this.expense)
}

Теперь у меня есть sweetalert Я запутался, как реализовать его после успешного отправки запроса Axios

Я пытался поместить это в свои действия вот так

storeExpense(context, params){
    axios.post('api/expenses', params)
    .then( response => {
        context.dispatch('getExpenses')
        this.$swal(
            'Success',
            'Expense has been updated!',
            'success'
        )
    })
    .catch( error => {
        context.commit('errors', error.response.data.errors)
        //console.log(error.response.data.errors);
    })
}

но ничего не произошло, потому что он находится в файле действия. Должен ли я назвать его внутри моего компонента, как это?

this.$store.dispatch('storeExpense',this.expense)
     .then( response => {
      this.$swal(
         'Success',
         'Expense has been created!',
         'success'
)

Есть идеи, как мне это реализовать? Спасибо

Я новичок в vuejs и vuex.

1 Ответ

0 голосов
/ 20 мая 2019

Я думаю, что ключевой вопрос заключается в том, что «this» может быть не «this», которое вы хотите в модуле магазина, «this» в модуле магазина отличается от «this» в компонентах.Поэтому измените способ оповещения

  1. импорт swa в модуль вашего магазина

    импорт Swal из 'sweetalert2 / dist / sweetalert2.js'

  2. оповещать, когда axios compolete использует код, указанный ниже

    Swal.fire ({title: 'Error!', Текст: «Хотите продолжить», введите: «error», verifyButtonText:'Cool'})

  3. никогда не забывайте импортировать файл CSS SWA в основной файл js
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...