質問するログイン新規登録

Q&A

解決済

1回答

4959閲覧

vueコンポーネントの外でpiniaのactionを実行しても、その内容がvueコンポーネントの中には影響されない

maaaalon

総合スコア15

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2023/01/18 08:48

編集NaN/aN/aN aN:aN

0

0

前提

vue3で現状vuexを使っていたのですが、それをpiniaに変更しようとしています。

router/index.tsというルーティングを管理するファイルと
network/httpClient.tsというaxiosを管理するファイルが有り、このあたりでエラーが出た場合アラートを出したいり、ログインの管理をしています。
ただこれらのコンポーネント以外のファイルでstoreを呼び出すと以下のエラーが出ます。

storeの呼び出し

import { useAlertStore } from '../store/alert'; const alertStore = useAlertStore();

ブラウザのコンソールエラー

main.js:21 Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

試したこと

try1) 新しくcreatePiniaする

そこで
https://qiita.com/Naoto_Ito/items/ede2b0a09f474df5e704
を参考に

import { setActivePinia, createPinia } from 'pinia' import { useMyStore } from './myStore' // 方法1:Piniaインスタンスを作って普通に注入 const pinia = createPinia() const myStore = useMyStore(pinia) // 方法2:setActivePinia()を利用 setActivePinia(createPinia()) const myStore = useMyStore()

追加しました。

すると方法1の方ではエラーは出なくなったのですが、そこで呼び出したactionの内容をコンポーネントで呼び出ししても、影響がありませんでした。
方法2では解消しませんでした。

try2) vueのpluginを読み込むときに使っているpiniaのインスタンスをstoreの引数に渡してみた。

const app = createApp(App) import { createPinia } from 'pinia' const pinia = createPinia() app.use(pinia) app.mount('#app') import { useAlertStore } from './store/alert'; const alertStore = useAlertStore(pinia); class HttpClient {     alertStore.openAlert({ text: 'TEST', type: "error" }) ....省略 const httpClient = new HttpClient(); app.config.globalProperties.$httpClient = httpClient

これでうまく動作しました。

main.tsのpluginをuseしたときにpiniaのインスタンスと同じものを使えば良さそう。
ただそれだとHttpClientをvueコンポーネントの外で使うことができない。

例)vue コンポーネント内でならthisで呼べるようになっている。

const res = await this.$httpClient.put(..);

しかしstoreなどvueコンポーネント外で使う場合はimportする場合があるがそうするとstoreが使えないということになる。

import { httpClient } from "@/admin/network/httpClient";

なにか良い解決方法などあれば教えていただきたいです。

補足

SPAです。

参考

githubの同様っぽい質問

参考1

参考2

ここの参考ではhelperなどのコンポーネント外でstoreを呼び出して使っているようなのですが、なぜエラーが起きずに使えているのか不明
https://github.com/cornflourblue/vue-3-pinia-registration-login-example/blob/master/src/helpers/fetch-wrapper.js

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

guest

回答の取得に失敗しました

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.25%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問