問題:
在做運營開發工具的時候 我想要請求后台服務器保存成功后 彈出一個彈框(餓了嗎 的 message 彈框), 由於$message 是掛在 Vue原型鏈上的方法 (Vue.prototype.$message = Message;)。以下action.js 中的this不指向Vue,因此以下代碼會報錯。Vuex 框架原理與源碼分析
//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 , 但是用了另一種方法同樣實現了我的功能。 以后類似這種問題都可以像這樣解決。