Vue.js+Vuex環境でstoreの中でrouter.pushなどrouterの処理を実行したいとき

2020年8月26日

今回はVue.js+Vuex環境でstoreの中でrouter.pushなどrouterの処理を実行したいときどのようにすれば良いのかについてご紹介いたします。

Vue.js+Vuex環境でstoreの中でrouter.pushなどrouterの処理を実行したいとき

Vue.js+Vuex環境でstoreの中でrouter.pushなどの処理を入れたいときがあると思います。

例として、store.jsやstore.tsで下記のrouter.pushの処理を入れたいとしましょう。

この場合、そのままstore内で書くと
router.push({ path: '/' })
のように書かなければなりませんが、「Cannot find name 'router’」のように変数として認識されてしまいます。

そこでいろいろ調べたところ下記のstack overflowを見つけました。
https://stackoverflow.com/questions/40736799/how-to-navigate-using-vue-router-from-vuex-actions

上記stack overflowによると、単純に
import {router} from "../main.js"
や
import router from '@/router'
のようにrouterをimportすればエラーが解消されるようです。

実際に私も上記に倣ってrouterをimportしたところ、無事「Cannot find name 'router’」が消えて"router"として認識されるようになりました。

みなさんもぜひお試しください。

終わりに

今回はVue.js+Vuex環境でstoreの中でrouter.pushなどrouterの処理を実行したいときどのようにすれば良いのかについてご紹介いたしました。