How to change global variables in vue

How to change global variables in Vue

In Vue, global variables can be accessed and modified in Vue instances or components. Global variables usually store various configuration information or status in the application. Changing the value of global variables in a Vue instance or component can give the application more interactions and custom behaviors, thereby improving the user experience and enhancing the scalability of the application. So, this article will introduce how to change global variables in Vue.

The first way: use Vue.prototype

Vue.prototype is an empty Vue instance, you can define global variables on its prototype, so that all Vue instances and component instances are Global variables can be inherited from the prototype to achieve global data sharing. The following is a sample code:

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

In the above code, we define the global variable under Vue.prototype.$globalData, which contains two properties: message and count. Among them, the initial value of message is "hello world" and the initial value of count is 0.

To use these global variables in a component, just use this.$globalData within the component to access:

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

In the above code, we can access it via this.$globalData.message and this.$globalData.count to get the value of the global variable and display it on the page.

If you need to update the value of the global variable in the Vue instance or component, use this.$globalData in the Vue instance or component to access and modify the value of the global variable, for example:

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

In the above code, we define a method named incrementCount, which can be called in Vue instances and components. Each call will increase the value of $globalData.count by one, thereby modifying the global variable.

Second way: Use Vue.observable

Vue.observable is a dependency of Vue, which can create an object that can be observed. Using an Observable object, the object's properties can be monitored and modified in any Vue component. The following is a sample code:

import Vue from "vue";

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

export default store;

In the above code, we first import Vue and use the Vue.observable method to create an Observable object named store, which contains two properties: message and count. Among them, the initial value of message is "hello world" and the initial value of count is 0.

To use these global variables in the component, you only need to introduce the store within the component to access:

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

In the above code, we first introduced the store object and defined it in the computed attribute A method named store returns a store object. In the template, you can use store.message and store.count to get the value of the global variable to display on the page.

If you need to update the value of a global variable in a Vue instance or component, you only need to update it through assignment, for example:

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

In the above code, we define a name It is the incrementCount method. This method can be called in Vue instances and components. Each call will increase the value of store.count by one, thereby modifying the global variable.

Summary:

This article introduces how Vue changes global variables in two ways: using Vue.prototype and using Vue.observable. Both methods can achieve access and modification of global variables, but the Vue.observable method is the officially recommended method by Vue. Regardless of which method you use, global variables need to be used with caution to avoid confusing and unpredictable behavior of your application. Of course, if designed well, global variables can also become an important part of an application.

The above is the detailed content of How to change global variables in vue. For more information, please follow other related articles on the PHP Chinese website!