Question

我有动作

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的初学者。

Answer 1

我认为关键问题是“ this”可能不是您要在存储模块中使用的“ this”，在存储模块中的“ this”与组件中的“ this”不同。因此，更改您要提醒的方式

在商店模块中导入swa

从'sweetalert2 / dist / sweetalert2.js'导入Swal
当axios强制使用以下代码时发出警报

Swal.fire（{ 标题：“错误！”，文字：“您要继续吗？”，类型：“错误”， ConfirmButtonText：“酷” }）
永远不要忘记在主要js中导入swa的css文件

成功发布axios发布后，实现一个弹出框

1 个答案: