Bagaimana untuk menentukan pembolehubah global dalam vue3

vue3 mentakrifkan pembolehubah global

Dalam vue2, kita tahu bahawa vue2.x menggunakan Vue.prototype.$xxxx=xxx untuk mentakrifkan pembolehubah global, dan kemudian memperoleh pembolehubah global melalui ini.$xxx.

Tetapi dalam vue3, kaedah ini jelas tidak berkesan. Kerana kita tidak boleh mendapatkan ini dalam persediaan dalam vue3, jadi menurut dokumentasi rasmi kami menggunakan kaedah berikut untuk menentukan pembolehubah global:

Mula-mula tulis pembolehubah global yang ingin kami tentukan dalam main.js, seperti Sistem id

app.config.globalProperties.$systemId = "10"

Sekarang anda perlu menggunakan pembolehubah ini dalam halaman Anda hanya perlu memperkenalkan getCurrentInstance daripada vue.

import { getCurrentInstance } from "vue";
const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId
console.log(systemId);//控制台可以看到输出了10

app.config global vue3 tidak boleh digunakan dalam halaman. Penggunaan .globalProperties

globalProperties

• Jenis: [key: string]: mana-mana

• Lalai: undefined

• Penggunaan

Tambahkan sifat global yang boleh diakses daripada mana-mana contoh komponen dalam aplikasi. Sifat komponen diutamakan dalam menamakan konflik.

Ini boleh menggantikan sambungan Vue 2.x Vue.prototype:

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
 
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

Apabila kita mahu memanggil http dalam komponen, kita perlu menggunakan getCurrentInstance() untuk mendapatkannya.

import { getCurrentInstance, onMounted } from "vue";
export default {
  setup( ) {
    const { ctx } = getCurrentInstance(); //获取上下文实例，ctx=vue2的this
    onMounted(() => {
      console.log(ctx, "ctx");
      ctx.http();
    });
  },
};

getCurrentInstance mewakili konteks, iaitu, tika semasa. ctx adalah bersamaan dengan Vue2 ini, tetapi adalah penting untuk ambil perhatian bahawa ctx bukan ini hanya sesuai untuk peringkat pembangunan Jika projek itu dibungkus dan dijalankan pada pelayan pengeluaran, ralat akan berlaku objek pelekap. Penyelesaian kepada masalah ini ialah menggunakan proksi dan bukannya ctx Rujukan kod adalah seperti berikut.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menentukan pembolehubah global dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!