如何在 vuex action 中获取到 vue 实例

问题:
在做运营开发工具的时候 我想要请求后台服务器保存成功后 弹出一个弹框(饿了吗 的 message 弹框), 由于$message 是挂在 Vue原型链上的方法 (Vue.prototype.$message = Message;)。以下action.js 中的this不指向Vue,因此以下代码会报错。

//action.js 
    export const saveActivity = ({commit},params) => {
      return Fetch.post(`/activities`,params).then( data => {
        if(data.code===2000){
             this.$message('保存成功') ;  // 报错!!!
        }
      })
    };

解决办法:

export const saveActivity = ({commit},params) => {
  return Fetch.post(`/activities`,params).then( data => {
    return data
  })
};

由于action 的处理函数返回的是 promise 对象,此处可以在调用saveActivity 的组件中 .then() 方法中处理:

methods:{
...mapActions([
      'saveActivity'
    ]),
this.saveActivity(params).then(data=>{
        if(data.data.code === 2000){
          this.$message({
            message: '保存成功',
            type: 'success',
            center:true
          })
        }
      })
}

综上: 虽然没有在 action 中获取到 vue , 但是用了另一种方法同样实现了我的功能。 以后类似这种问题都可以像这样解决。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值