问题:
在做运营开发工具的时候 我想要请求后台服务器保存成功后 弹出一个弹框(饿了吗 的 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 , 但是用了另一种方法同样实现了我的功能。 以后类似这种问题都可以像这样解决。