Используйте vuex
.Ваш vuex store
предоставит объект getters
, который можно обернуть в нативные computed
объекты нескольких компонентов или получить к нему прямой доступ.Ваш код будет СУХИМ, реактивным, кэшированным и обслуживаемым.
По моему опыту, когда вам нужно выйти за пределы child-parent
отношений данных, vuex
, store
и shared state
- это путьидти.Как только вы освоите его, совершенно волшебным образом будет развиваться ваше приложение.
Вопрос о том, как установить vuex
, выходит за рамки вопроса.Посетите https://vuex.vuejs.org/guide/getters.html, чтобы увидеть, как геттеры похожи на вычисляемые свойства со значением совместного использования между компонентами.Официальное руководство Vuex также покажет, как инициализировать ваш экземпляр Vue с магазином.
Вот некоторые фрагменты, чтобы показать вам актеров в системе vuex
.
Store and State
// state definition (basically a shared reactive 'data' object that lives outside components)
state:{
message:'Hello'
}
// the store getters are declared as methods and accessed as properties (just like component/computed)
getters:{
message: state => return state.message
}
Доступ из компонентов
// component 1 wraps getter
computed:{
message(){
return this.$store.getters.message
}
}
// component 2 also wraps getter
computed:{
message(){
return this.$store.getters.message
}
}
// templates can also use getters directly
<div>{{$store.getters.message}}</div>
// If message was wrapped, you can simply use the computed property
<div>{{message}}</div>
Как только вы начнете использовать vuex
, начнут появляться все виды других сокровищ, таких как инструменты разработчикав Chrome поддержка отмены / повтора, простой рефакторинг состояния, отладка во времени, сохранение приложений и т. д. Существуют также ярлыки для добавления нескольких получателей хранилища в ваши вычисленные свойства.