如何在 vuex action 中獲取到 vue 例項

小魚er發表於2018-04-04
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 ， 但是用了另一種方法同樣實現了我的功能。 以後類似這種問題都可以像這樣解決。

相關文章