ホームページ > ウェブフロントエンド > Vue.js > vue3でグローバル変数を定義する方法

vue3でグローバル変数を定義する方法

PHPz
リリース: 2023-05-12 16:40:14
転載
7811 人が閲覧しました

vue3 はグローバル変数を定義します

vue2 では、vue2.x が Vue.prototype.$xxxx=xxx を使用してグローバル変数を定義し、this.$xxx を通じてグローバル変数を取得することがわかります。

しかし、vue3 では、この方法は明らかに機能しません。 vue3 のセットアップではこれを取得できないため、公式ドキュメントによると、次の方法を使用してグローバル変数を定義します。

まず、main.js で定義したいグローバル変数 (System など) を書き込みます。 id

app.config.globalProperties.$systemId = "10"
ログイン後にコピー

次に、この変数をページで使用する必要があります。必要なのは、vue から getCurrentInstance を導入することだけです。この変数は使用できないことに注意してください。

import { getCurrentInstance } from "vue";
const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId
console.log(systemId);//控制台可以看到输出了10
ログイン後にコピー

vue3 グローバル変数 app.config .globalProperties の使用法

globalProperties

  • タイプ: [キー: 文字列]: 任意

  • ##デフォルト: 未定義

  • 使用法

アプリケーションの任意のコンポーネント インスタンスでアクセスできるグローバル プロパティを追加します。名前の競合では、コンポーネントのプロパティが優先されます。

これは、Vue 2.x Vue.prototype 拡張機能を置き換えることができます:

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
 
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}
ログイン後にコピー

コンポーネント内で http を呼び出したい場合は、getCurrentInstance() を使用してそれを取得する必要があります。

import { getCurrentInstance, onMounted } from "vue";
export default {
  setup( ) {
    const { ctx } = getCurrentInstance(); //获取上下文实例,ctx=vue2的this
    onMounted(() => {
      console.log(ctx, "ctx");
      ctx.http();
    });
  },
};
ログイン後にコピー
getCurrentInstance はコンテキスト、つまり現在のインスタンスを表します。 ctx は Vue2 のこれに相当しますが、ctx は開発段階にのみ適していることに注意してください。プロジェクトがパッケージ化されて運用サーバー上で実行されると、エラーが発生します。ctx はルーティングとグローバルを取得できませんオブジェクトの取り付け。この問題の解決策は、ctx の代わりにプロキシを使用することです。コード リファレンスは次のとおりです。

rree

以上がvue3でグローバル変数を定義する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:yisu.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート