質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

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

Vuex

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

TypeScript

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

Q&A

解決済

1回答

3192閲覧

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

編集2023/01/19 09:24

前提

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

回答1

0

自己解決

store/index.tsというファイルでpiniaをcreateしてexportしていた。

import { createPinia } from 'pinia' export default createPinia()

store/index.tsをplugins/index.tsというファイルで他のプラグインと一緒にuseしていた。

// Plugins import { loadFonts } from './webfontloader' import vuetify from './vuetify' import pinia from '../store' import router from '../router' // Types import type { App } from 'vue' export function registerPlugins(app: App) { loadFonts() app .use(vuetify) .use(router) .use(pinia) }

store/index.tsをmain.tsで読み込んでいた

// Components import App from './App.vue' // Composables import { createApp } from 'vue' // Plugins import { registerPlugins } from './plugins' const app = createApp(App) registerPlugins(app) app.mount('#app') import { httpClient } from './network/httpClient' app.config.globalProperties.$httpClient = httpClient

network/httpClientのファイルでpiniaのstoreを使いたかったのだが、
正解はこう

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

またはこう

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

以下とかだとうまく行かない

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

投稿2023/01/19 15:48

編集2023/01/19 15:55
maaaalon

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問