Vuex использует единое дерево состояний — то есть этот единственный объект содержит все состояние уровня вашего приложения и служит «единым источником истины». Это также означает, что обычно у вас будет только одно хранилище для каждого приложения. Единое дерево состояний упрощает поиск определенной части состояния и позволяет нам легко делать снимки текущего состояния приложения для целей отладки.

Единое дерево состояний не противоречит модульности — в последующих главах мы обсудим, как разделить состояние и мутации на подмодули.

Поскольку хранилища Vuex являются реактивными, самый простой способ «получить» из него состояние — это просто вернуть некоторое состояние хранилища из вычисляемого свойства (либо использовать getters - MapGetters, рассмотрим этот подход в следующих уроках)

Всякий раз store.state.count при изменении это приводит к повторной оценке вычисляемого свойства и запуску связанных обновлений DOM

Однако этот шаблон заставляет компонент полагаться на синглтон глобального хранилища. При использовании модульной системы требуется импортировать хранилище в каждый компонент, использующий состояние хранилища, а также требуется макетирование при тестировании компонента.

Vuex «внедряет» хранилище во все дочерние компоненты корневого компонента через систему плагинов Vue и будет доступно для них как this.$store. Давайте обновим нашу Counterреализацию:

Когда компоненту необходимо использовать несколько свойств или методов получения состояния хранилища, объявление всех этих вычисляемых свойств может стать повторяющимся и многословным. Чтобы справиться с этим, мы можем использовать помощник mapState, который генерирует для нас вычисляемые функции

Мы также можем передать массив строк, mapState если имя отображаемого вычисляемого свойства совпадает с именем поддерева состояния.

Обратите внимание, что mapState возвращает объект. Как мы можем использовать его в сочетании с другими локальными вычисляемыми свойствами? Обычно нам приходится использовать утилиту для объединения нескольких объектов в один, чтобы мы могли передать окончательный объект в computed. Однако с помощью оператора расширения (rest) мы можем значительно упростить синтаксис