vue에서 전역 변수를 변경하는 방법

Vue에서 전역 변수를 변경하는 방법

Vue에서는 Vue 인스턴스 또는 구성 요소에서 전역 변수에 액세스하고 수정할 수 있습니다. 전역 변수는 일반적으로 응용 프로그램의 다양한 구성 정보나 상태를 저장합니다. Vue 인스턴스 또는 구성 요소에서 전역 변수의 값을 변경하면 애플리케이션에 더 많은 상호 작용과 사용자 정의 동작이 제공되어 사용자 경험이 향상되고 애플리케이션의 확장성이 향상됩니다. 그래서 이번 글에서는 Vue에서 전역 변수를 변경하는 방법을 소개하겠습니다.

첫 번째 방법: Vue.prototype 사용

Vue.prototype은 빈 Vue 인스턴스이므로 프로토타입에 전역 변수를 정의할 수 있으므로 모든 Vue 인스턴스와 구성 요소 인스턴스는 프로토타입에서 전역 변수를 상속할 수 있으므로 목적을 달성할 수 있습니다. 글로벌 데이터 공유. 다음은 샘플 코드입니다.

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

위 코드에서는 메시지와 개수라는 ​​두 가지 속성이 포함된 Vue.prototype.$globalData 아래에 전역 변수를 정의합니다. 그 중 메시지의 초기값은 "hello world"이고, count의 초기값은 0이다.

컴포넌트에서 이러한 전역 변수를 사용하려면 컴포넌트 내부에서 this.$globalData를 사용하여 액세스하면 됩니다.

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

위 코드에서는 this.$globalData.message 및 this.$globalData.count를 통해 얻을 수 있습니다. 전역 변수의 값이 페이지에 표시됩니다.

Vue 인스턴스 또는 구성 요소에서 전역 변수 값을 업데이트해야 하는 경우 Vue 인스턴스 또는 구성 요소에서 this.$globalData를 사용하여 전역 변수 값에 액세스하고 수정합니다. 예:

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

In the 위의 코드에서는 Vue 인스턴스 및 구성 요소에서 호출할 수 있는 incrementCount라는 메서드를 정의합니다. 각 호출은 $globalData.count 값을 1씩 증가시켜 전역 변수를 수정합니다.

두 번째 방법: Vue.observable을 사용하세요

Vue.observable은 관찰할 수 있는 객체를 생성할 수 있는 Vue의 종속성입니다. Observable 객체를 사용하면 모든 Vue 구성 요소에서 객체의 속성을 모니터링하고 수정할 수 있습니다. 다음은 샘플 코드입니다.

import Vue from "vue";

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

export default store;

위 코드에서는 먼저 Vue를 가져오고 Vue.observable 메서드를 사용하여 message와 count라는 두 가지 속성을 포함하는 store라는 Observable 객체를 생성합니다. 그 중 메시지의 초기값은 "hello world"이고, count의 초기값은 0이다.

구성 요소에서 이러한 전역 변수를 사용하고 구성 요소 내에 저장소를 도입하면 액세스할 수 있습니다.

<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>

위 코드에서는 먼저 저장소 개체를 도입하고 계산된 속성에 store라는 메서드를 정의했습니다. 이 메서드는 저장소를 반환합니다. 물체. 템플릿에서 store.message 및 store.count를 사용하여 페이지에 표시할 전역 변수 값을 가져올 수 있습니다.

Vue 인스턴스 또는 구성 요소에서 전역 변수 값을 업데이트해야 하는 경우 값을 할당하여 업데이트하기만 하면 됩니다. 예:

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

위 코드에서는 incrementCount라는 메서드를 정의합니다. Vue 인스턴스 및 구성 요소에서 호출될 때마다 store.count 값이 1씩 증가하여 전역 변수가 수정됩니다.

요약:

이 기사에서는 Vue.prototype 사용 및 Vue.observable 사용이라는 Vue에서 전역 변수를 변경하는 두 가지 방법을 소개합니다. 두 방법 모두 전역 변수에 액세스하고 수정할 수 있지만 Vue.observable 방법은 Vue에서 공식적으로 권장하는 방법입니다. 어떤 방법을 사용하든 전역 변수는 애플리케이션의 혼란스럽고 예측할 수 없는 동작을 방지하기 위해 주의해서 사용해야 합니다. 물론 잘 디자인되면 전역 변수도 애플리케이션의 중요한 부분이 될 수 있습니다.

위 내용은 vue에서 전역 변수를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!