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

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 サイトの他の関連記事を参照してください。