Сначала в React у нас был Flux. Затем мы перешли на redux. Теперь мы переходим к MobX.
Vue начал с Vuex, который является эквивалентом redux. Однако Vue-Stash - это MobX для Vue.
Настроить магазин очень просто, и вы можете напрямую устанавливать значения, не выполняя действия = ›церемония сокращения. Он хорошо организован и делает магазин таким, каким он должен быть, и о нем легче рассуждать.
Vue 2 запрашивает, чтобы вы не обращались к родительскому состоянию напрямую через дочерние компоненты, потому что всякий раз, когда вы вносите изменения в родительское состояние, он повторно отображает дочерние реквизиты, которые перезагружают дочерний компонент, и поток данных труднее рассуждать.
Однако Vue-Stash как бы строит это вокруг. Вы подключаете одно центральное хранилище к данным корневого компонента Vue.
import Vue from 'vue'
import VueStash from 'vue-stash'
Vue.use(VueStash)
const app = new Vue({
el: '#app',
router: router,
data: {
store: {
message: 'Hi',
age: 30
}
}
})
Затем он делает это хранилище напрямую доступным для всех ваших дочерних компонентов с помощью
this.$store
this. $ store - это ссылка на
this.$root.store
Вы устанавливаете настраиваемую опцию в своих дочерних компонентах, чтобы выбрать, какие свойства магазина вы хотите наблюдать.
store: ['message', 'age']
Для каждого выбранного вами свойства Vue-Stash создаст вычисляемые свойства, используя имена свойств, которые можно читать и записывать из this. $ Store.propertyName.
В своем шаблоне вы всегда можете сделать
{{$store.message}}
Но потому что ты это сделал
store: ['message']
Вы можете использовать
{{message}}
Если вы хотите изменить значение сообщения, вы можете напрямую отредактировать его.
this.message = ‘Another message’
Для этого используются сеттеры. $ Store.message.
Это означает, что вам не нужно писать действия и редукторы. Вы можете просто написать так, как вы это делаете интуитивно, и у вас будет централизованный магазин. Об этом все еще легко рассуждать.
