Разделяемое состояние компонентов

Последнее обновление: 03.11.2020

Для каждого компонента можно определить его собственное состояние. Но также можно определять некоторое общее состояние для нескольких компонентов. Для этого состояние определяется в виде внешнего объекта:

let globalData = {
        header: 'Counter Program',
        count:0
};
const app = Vue.createApp({});
app.component('counter', {
    data(){
        return globalData;
    },
    template:`<div><h2>{{header}}</h2>
				<button v-on:click="increase">+</button>
                <span>{{count}}</span>
            </div>`,
    methods:{
        increase:function(){
            this.count++;
        }
    }
});

Конкретно в данном примере у нас не будет разницы от вынесения объект data во вне. В то же время между двумя способами определения data все таки есть разница.

Например, определим следующую веб-страницу:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <counter></counter>
    <counter></counter>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
let globalData = {
        header: 'Counter Program',
        count:0
};
const app = Vue.createApp({});
app.component('counter', {
    data(){
        return {
			header: 'Counter Program',
			count:0
		};
    },
    template:`<div><h2>{{header}}</h2>
				<button v-on:click="increase">+</button>
                <span>{{count}}</span>
            </div>`,
    methods:{
        increase:function(){
            this.count++;
        }
    }
});
app.mount('#app');
</script>
</body>
</html>

В данном случае приложение Vue использует два раза компонент counter. И каждый объект counter работает со своим состоянием. Изменение свойство count в одном компоненте никак не скажется на другом.

Состояние компонентов в Vue 3

Рассмотрим другую ситуацию, когда компоненты используют одно и то же состояние:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <counter></counter>
    <counter></counter>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
let globalData = {
        header: 'Counter Program',
        count:0
};
const app = Vue.createApp({});
app.component('counter', {
    data(){
        return globalData;
    },
    template:`<div><h2>{{header}}</h2>
				<button v-on:click="increase">+</button>
                <span>{{count}}</span>
            </div>`,
    methods:{
        increase:function(){
            this.count++;
        }
    }
});
app.mount('#app');
</script>
</body>
</html>

В этом случае одно и то же состояние будет разделяться обоими компонентами. Поэтому изменения в состоянии в одном компоненте повлияют и на другой компонент.

Состояние компонентов в Vue 3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850