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

はじめに

ストアのactionでルーティングを行うにはどうすればよいかを解説します。

準備

piniaのストアインスタンスにプロパティを追加し、Vue Routerのインスタンスを設定しておくことで、ストアからVue Routerを使うことができます。
公式ドキュメントの説明はこちら。
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);

app.mount('#app');

公式ドキュメントに記載がありますが、アプリケーションで扱うデータのようにリアクティブオブジェクトとして扱うもの以外、例えばVue Routerのようなライブラリのインスタンスやユーティリティーについては、markRawを使ってラップすることで非リアクティブオブジェクトとして扱うことができます。

actionでのルーティング

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

実装サンプル

import { defineStore } from 'pinia';

export const useRoutingStore = defineStore({
  id: 'routing',
  actions: {
    push() {
      this.router.push('/');
    },
  },
});

this.routerでVue Routerのインスタンスにアクセスしています。