PiniaのactionからVue Routerを使ってルーティング

概要

Pinia のドキュメントに記載の通り、ストアインスタンスのプロパティに Vue Router のインスタンスを設定することにより、 action から Vue Router を使うことができるようになります。これによって、action 内でルーティングを行うことができます。
公式ドキュメントの解説: https://pinia.vuejs.org/core-concepts/plugins.html#adding-new-external-properties

実装例

公式ドキュメントで省略されている箇所も含めてコード例を記載します。

main.ts

import { createApp, markRaw } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';

const app = createApp(App);
const pinia = createPinia();

pinia.use(({ store }) => {
  store.router = markRaw(router);
});

app.use(pinia);
app.use(router);

ストアインスタンスのプロパティに VueRouter のインスタンスを設定しています。

action

actions: {
  routerPush() {
    this.router.push('/');
  },
},

action では、ストアのインスタンスに追加されたプロパティを経由して、Vue Router を使ってルーティングすることができます。