[nuxt.js] storeのactionsの中でrouter.pushを使う方法 (way to access router.push in vuex store)

nuxt.jsのstoreのactionsの中でvuerouterのpushを使う方法がネット上に見当たらなかったので、ネットにある情報(このへん)  とか(このへん)とかを調べてもうまくいかない・・・巨大ハマりポイントがありました。 storeのactionsにAPI接続とかを書いて、共通処理としてエラーならリダイレクトさせたい時とか、よくありますよね。

axiosのPromiseの中でthisを使ってもrouterにアクセスできない。

‘./router’をimportしろとか、ネットの情報でthis.appや$nuxtの中にrouterあるでしょ?ってネットに書いてあるけど、ねーよ!ってなってました。 結果うまく行ったのはこのコード。
  async callAPI(context, api) {
   const that = this
  
    await axios.get(param)
        .then((res) => {
            // うまくいったとき。。。
        }).catch(function (error) {
            // エラーの時・・・
          that.$router.push('/error')
        })
 }
関係ない部分は省略しています。that = thisにするだけで$routerにアクセスできますよ。それだけのことでした!

「[nuxt.js] storeのactionsの中でrouter.pushを使う方法 (way to access router.push in vuex store)」への1件のフィードバック

  1. 今更ですが、catchに渡す関数を function(error) {} じゃなくて (error) => {} にすれば外側のthisをそのまま使えますね

    await axios.get(param)
    .then((res) => {
    // うまくいったとき。。。
    }).catch((error) => {
    // エラーの時・・・
    this.$router.push(‘/error’)
    })
    }

    返信

コメントする