Bagaimana untuk menukar pembolehubah global dalam vue

Cara menukar pembolehubah global dalam Vue

Dalam Vue, pembolehubah global boleh diakses dan diubah suai dalam kejadian atau komponen Vue. Pembolehubah global biasanya menyimpan pelbagai maklumat konfigurasi atau status dalam aplikasi. Menukar nilai pembolehubah global dalam contoh atau komponen Vue boleh memberikan aplikasi lebih banyak interaksi dan gelagat tersuai, sekali gus meningkatkan pengalaman pengguna dan meningkatkan kebolehskalaan aplikasi. Jadi, artikel ini akan memperkenalkan cara menukar pembolehubah global dalam Vue.

Cara pertama: gunakan Vue.prototype

Vue.prototype ialah tika Vue kosong dan pembolehubah global boleh ditakrifkan pada prototaipnya, supaya semua tika Vue dan tika komponen adalah pembolehubah Global boleh diwarisi daripada prototaip untuk mencapai perkongsian data global. Berikut ialah contoh kod:

Vue.prototype.$globalData = {
    message: "hello world",
    count: 0
};

Dalam kod di atas, kami mentakrifkan pembolehubah global di bawah Vue.prototype.$globalData, yang mengandungi dua sifat: mesej dan kiraan. Antaranya, nilai awal mesej ialah "hello world" dan nilai awal kiraan ialah 0.

Untuk menggunakan pembolehubah global ini dalam komponen, hanya gunakan ini.$globalData dalam komponen untuk mengakses:

<template>
    <div>
        <h1 id="globalData-message">{{ $globalData.message }}</h1>
        <p>{{ $globalData.count }}</p>
    </div>
</template>

Dalam kod di atas, kami boleh mengaksesnya melalui ini.$globalData . mesej dan ini.$globalData.count untuk mendapatkan nilai pembolehubah global dan memaparkannya pada halaman.

Jika anda perlu mengemas kini nilai pembolehubah global dalam tika atau komponen Vue, gunakan ini.$globalData dalam tika atau komponen Vue untuk mengakses dan mengubah suai nilai pembolehubah global, contohnya:

methods: {
    incrementCount() {
        this.$globalData.count += 1;
    }
}

Dalam kod di atas, kami mentakrifkan kaedah bernama incrementCount, yang boleh dipanggil dalam kejadian dan komponen Vue Setiap panggilan akan meningkatkan nilai $globalData.count sebanyak satu, dengan itu mengubah suai pembolehubah global.

Cara kedua: Gunakan Vue.observable

Vue.observable ialah kebergantungan Vue, yang boleh mencipta objek yang boleh diperhatikan. Menggunakan objek Boleh Diperhatikan, sifat objek boleh dipantau dan diubah suai dalam mana-mana komponen Vue. Berikut ialah contoh kod:

import Vue from "vue";

const store = Vue.observable({
    message: "hello world",
    count: 0
});

export default store;

Dalam kod di atas, kami mula-mula mengimport Vue dan menggunakan kaedah Vue.observable untuk mencipta objek Observable bernama store, yang mengandungi dua sifat: mesej dan kiraan . Antaranya, nilai awal mesej ialah "hello world" dan nilai awal kiraan ialah 0.

Untuk menggunakan pembolehubah global ini dalam komponen, anda hanya perlu memperkenalkan kedai dalam komponen untuk mengakses:

<template>
    <div>
        <h1 id="store-message">{{ store.message }}</h1>
        <p>{{ store.count }}</p>
    </div>
</template>

<script>
import store from "@/store.js";

export default {
    computed: {
        store() {
            return store;
        }
    }
};
</script>

Dalam kod di atas, kami mula-mula memperkenalkan objek kedai, dan dalam atribut yang dikira Kaedah bernama stor ditakrifkan yang mengembalikan objek stor. Dalam templat, anda boleh menggunakan store.message dan store.count untuk mendapatkan nilai pembolehubah global untuk dipaparkan pada halaman.

Jika anda perlu mengemas kini nilai pembolehubah global dalam contoh atau komponen Vue, anda hanya perlu mengemas kininya melalui tugasan, contohnya:

methods: {
    incrementCount() {
        store.count += 1;
    }
}

Dalam kod di atas, kami mentakrifkan Kaedah bernama incrementCount, yang boleh dipanggil dalam contoh dan komponen Vue Setiap panggilan akan meningkatkan nilai store.count sebanyak satu, dengan itu mengubah suai pembolehubah global.

Ringkasan:

Artikel ini memperkenalkan dua cara menukar pembolehubah global dalam Vue: menggunakan Vue.prototype dan menggunakan Vue.observable. Kedua-dua kaedah boleh mencapai akses dan pengubahsuaian pembolehubah global, tetapi kaedah Vue.observable ialah kaedah yang disyorkan secara rasmi oleh Vue. Tidak kira kaedah yang anda gunakan, pembolehubah global perlu digunakan dengan berhati-hati untuk mengelakkan tingkah laku aplikasi anda yang mengelirukan dan tidak dapat diramalkan. Sudah tentu, jika direka dengan baik, pembolehubah global juga boleh menjadi bahagian penting dalam aplikasi.

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