Vuex での Vue インスタンスへのアクセス: ステップバイステップ ガイド

Question

Vue.js プロジェクトの main.js でグローバル変数を宣言しました。

リーリー

どこでも使いたい。 this.$API を使用すると正常に動作します。

しかし、Vuex ではそれは機能しません。

リーリー

ここで this.$API は 未定義です。

Vuex で $API を使用するにはどうすればよいですか。

Answer 1

私は Vue 3 を使用していますが、Vue.prototype.$foo はこのバージョンでは削除されているようです。また、私のバージョンの VueX には this._vm が存在しないこともわかりました。

Vue 3 ドキュメントで提供されている Provide/Inject メソッドを調べました。これはコンポーネント内からグローバル変数にアクセスする場合にはうまく機能しますが、ストア内からはアクセスできません。

私が探している解決策は、Vue の globalProperties store でオブジェクトと標準プロパティを使用し、アプリをインストールする前にそれらを設定することです。

main.js：

リーリー

これについて気に入っている点は、ストレージとコンポーネントで同じ方法でグローバル変数にアクセスできることです。

コンポーネント内:

リーリー

...オペレーション、ミューテーション、ゲッターを介して同様に this.$conf.API_URL にアクセスできます。

このソリューションを見つけたら、ストア内から Vue インスタンス全体にアクセスする必要はなくなりましたが、何らかの理由で必要な場合は、 store.$app = app ;同じように割り当てることができます。 main.js 内の場所。

Answer 2

Vue 2 および Vuex 3 の回答

this._vm

にアクセスすると、ストア内の vue インスタンスにアクセスできます。 リーリー