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

今回は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の処理を実行したいときどのようにすれば良いのかについてご紹介いたしました。

【お知らせ】
プログラミングのコンサルタントをすることを考えております。
下記の通り、かなり格安でご用意させていただいております。
【格安】プログラミングコンサル生募集(初心者向け、フリーランス志望向け)

詳しくは下記のリンクをご覧ください。
https://chico-shikaku.com/2020/10/programming-consult-2020/

11月くらいを目処に開始予定です。
最初は募集があれば先着5名くらいを目安に考えております。
質問や意見、問い合わせやお申し込みは下記のリンクよりお願いいたします。
https://docs.google.com/forms/d/e/1FAIpQLSeTXskmlyPAHuhwiOE9togqJPWdhXYCyRoVnFkkbS0VN0Ftug/viewform?usp=sf_link

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Vuex

Posted by ちこ