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

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

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

var data = {
		header: 'Counter Program',
		count:0
};
Vue.component('counter', {
	data: function(){
		return data
	},
	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.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<counter></counter>
	<counter></counter>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('counter', {
	data: function(){
		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++;
		}
	}
});
new Vue({
	el: "#app"
});
</script>
</body>
</html>

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

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

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

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

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

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

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

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