Справочник API

Vuex.Store

import Vuex from 'vuex';

const store = new Vuex.Store({ ...options });

Опции конструктора Vuex.Store

state

тип: Object | Function

Корневой объект состояния хранилища Vuex. Подробнее

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

mutations

тип: { [type: string]: Function }

Доступные мутации хранилища. Обработчики мутаций первым аргументом получают state (при использовании модулей это будет локальное состояние модуля). Вторым аргументом передаётся «нагрузка» (payload), если она есть.

Подробнее

actions

тип: { [type: string]: Function }

Доступные действия хранилища. В обработчики передаётся объект context, со следующими свойствами:

{
  state,       // то же, что и `store.state`, или локальный state при использовании модулей
  rootState,   // то же, что и `store.state`, только при использовании модулей
  commit,      // то же, что и `store.commit`
  dispatch,    // то же, что и `store.dispatch`
  getters,     // то же, что и `store.getters`
  rootGetters; // то же, что и `store.getters`, только в модулях
}

Вторым аргументом передаётся «нагрузка» (payload), если она есть.

Подробнее

getters

тип: { [key: string]: Function }

Доступные геттеры хранилища. Функция получает следующие аргументы:

state,     // при использовании модулей — локальный state модуля
getters    // то же, что и store.getters

При определении в модуле

state,       // при использовании модулей — локальный state модуля
getters,     // локальные геттеры текущего модуля
rootState,   // глобальный state
rootGetters  // все геттеры

Зарегистрированные геттеры доступны через store.getters.

Подробнее

modules

тип: Object

Объект, содержащий под-модули для помещения в хранилище, в формате:
```
{
  key: {
    state,
    namespaced?,
    mutations?,
    actions?,
    getters?,
    modules?
  },
  ...
}
```
У каждого модуля могут быть свои state и mutations, аналогично корневому хранилищу. Состояние модуля прикрепляется к корневому, по указанному ключу. Мутации и геттеры модуля получают первым аргументом локальное состояние, а не корневое. При вызове действий context.state аналогичным образом указывает на локальное состояние модуля.

Подробнее

plugins

тип: Array<Function>

Массив функций-плагинов, которые применяются к хранилищу. Плагины просто получают хранилище в качестве единственного аргумента, и могут как отслеживать мутации (для сохранения исходящих данных, логирования или отладки) или инициировать их (для обработки входящих данных, например, websockets или observables).

Подробнее

strict

тип: boolean
по умолчанию: false

Форсирует использование «строгого режима» в хранилище Vuex. В нём любые изменения состояния, происходящие вне обработчиков мутаций, будут выбрасывать ошибки.

Подробнее

devtools

тип: boolean

Интеграция в devtools конкретного экземпляра Vuex. Например, передача false сообщает экземпляру хранилища Vuex, что не требуется подписываться на плагин devtools. Это будет полезно если у вас несколько хранилищ на одной странице.
```
{
  devtools: false
}
```

Свойства экземпляра Vuex.Store

state

тип: Object

Корневое состояние. Только для чтения.

getters

тип: Object

Зарегистрированные геттеры. Только для чтения.

Методы экземпляра Vuex.Store

commit

commit(type: string, payload?: any, options?: Object)
commit(mutation: Object, options?: Object)

Запуск мутации. options может содержать опцию root: true что позволяет запускать корневые (root) мутации в модулях со своим пространством имён. Подробнее

dispatch

dispatch(type: string, payload?: any, options?: Object): Promise<any>
dispatch(action: Object, options?: Object): Promise<any>

Запуск действия. options может содержать опцию root: true что позволяет запускать корневые (root) действия в модулях со своим пространством имён. Возвращает Promise который разрешает все обработчики инициируемых действий. Подробнее

replaceState

replaceState(state: Object)

Замена корневого состояние хранилища новым. Используйте только для гидратации состояния и/или функциональности «машины времени».

watch

watch(fn: Function, callback: Function, options?: Object): Function

Реактивно отслеживает возвращаемое значение fn, и вызывает коллбэк в случае изменений. Первым аргументом fn будет состояние хранилища, вторым — геттеры. Опционально может принимать объект с настройками, с такими же параметрами как и у метода Vue vm.$watch.

Для прекращения отслеживания, необходимо вызвать возвращаемую методом функцию.

subscribe(handler: Function, options?: Object): Function

Отслеживание вызова мутаций хранилища. Обработчик handler вызывается после каждой мутации и получает в качестве параметров дескриптор мутации и состояние после мутации:

store.subscribe((mutation, state) => {
  console.log(mutation.type);
  console.log(mutation.payload);
});

По умолчанию, новый обработчик добавляется в конец цепочки, поэтому он будет выполняться после других обработчиков, добавленных раньше. Это поведение можно переопределить добавив prepend: true в options, что позволит добавлять обработчик в начало цепочки.

store.subscribe(handler, { prepend: true })

Для прекращения отслеживания, необходимо вызвать возвращаемую методом функцию.

Чаще всего используется в плагинах. Подробнее

subscribeAction

subscribeAction(handler: Function, options?: Object): Function

Добавлено в версии 2.5.0

Отслеживание вызова действий хранилища. Обработчик handler вызывается после каждого действия и получает в качестве параметров дескриптор действия и текущее состояние хранилища:

store.subscribeAction((action, state) => {
  console.log(action.type);
  console.log(action.payload);
});

store.subscribeAction(handler, { prepend: true })

Для прекращения отслеживания, необходимо вызвать возвращаемую методом функцию.

Добавлено в версии 3.1.0

Начиная с версии 3.1.0, в subscribeAction также можно определять, должен ли обработчик вызываться до или после вызова действия (по умолчанию поведение до):

store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}`)
  },
  after: (action, state) => {
    console.log(`after action ${action.type}`)
  }
})

Добавлено в версии 3.4.0

С версии 3.4.0 в subscribeAction также можно указывать обработчик error для перехвата ошибки, выброшенной при выполнении действия. В качестве третьего аргумента функция получает объект error.

store.subscribeAction({
  error: (action, state, error) => {
    console.log(`error action ${action.type}`)
    console.error(error)
  }
})

Метод subscribeAction чаще всего используется в плагинах. Подробнее

registerModule

registerModule(path: string | Array<string>, module: Module, options?: Object)

Регистрирует динамический модуль. Подробнее

options может иметь опцию preserveState: true, что позволяет сохранить предыдущее состояние. Полезно при отрисовке на стороне сервера (SSR).

unregisterModule

unregisterModule(path: string | Array<string>)

Удаление зарегистрированного динамического модуля. Подробнее

hasModule

hasModule(path: string | Array<string>): boolean

Проверка, не зарегистрирован ли уже модуль с заданным именем. Подробнее

Добавлено в версии 3.2.0

hotUpdate

hotUpdate(newOptions: Object)

Горячая перезагрузка действий и мутаций. Подробнее

Вспомогательные функции для компонентов

mapState

mapState(namespace?: string, map: Array<string> | Object<string | function>): Object

Создаёт вычисляемые свойства компонента, возвращающие под-дерево состояния хранилища Vuex. Подробнее

Первый опциональный аргумент может быть строкой пространства имён. Подробнее

Второй аргумент вместо объекта может быть функцией. function(state: any)

mapGetters

mapGetters(namespace?: string, map: Array<string> | Object<string>): Object

Создаёт вычисляемые свойства компонента для доступа к геттерам. Подробнее

Первый опциональный аргумент может быть строкой пространства имён. Подробнее

mapActions

mapActions(namespace?: string, map: Array<string> | Object<string | function>): Object

Создаёт проксирующие методы компонента для вызова действий хранилища. Подробнее

Первый опциональный аргумент может быть строкой пространства имён. Подробнее

Второй аргумент вместо объекта может быть функцией. function(dispatch: function, ...args: any[])

mapMutations

mapMutations(namespace?: string, map: Array<string> | Object<string | function>): Object

Создаёт проксирующие методы компонента для вызова мутаций хранилища. Подробнее

Первый опциональный аргумент может быть строкой пространства имён. Подробнее

Второй аргумент вместо объекта может быть функцией. function(commit: function, ...args: any[])

createNamespacedHelpers

createNamespacedHelpers(namespace: string): Object

Создаёт вспомогательные функции связывания с компонентами для указанного пространства имён. Возвращаемый объект содержит mapState, mapGetters, mapActions и mapMutations, которые связаны с указанным пространством имён. Подробнее

# Справочник API

# Vuex.Store

# Опции конструктора Vuex.Store

# state

# mutations

# actions

# getters

# modules

# plugins

# strict

# devtools

# Свойства экземпляра Vuex.Store

# state

# getters

# Методы экземпляра Vuex.Store

# commit

# dispatch

# replaceState

# watch

# subscribe

# subscribeAction

# registerModule

# unregisterModule

# hasModule

# hotUpdate

# Вспомогательные функции для компонентов

# mapState

# mapGetters

# mapActions

# mapMutations

# createNamespacedHelpers

Справочник API

Vuex.Store

Опции конструктора Vuex.Store

state

mutations

actions

getters

modules

plugins

strict

devtools

Свойства экземпляра Vuex.Store

state

getters

Методы экземпляра Vuex.Store

commit

dispatch

replaceState

watch

subscribe

subscribeAction

registerModule

unregisterModule

hasModule

hotUpdate

Вспомогательные функции для компонентов

mapState

mapGetters

mapActions

mapMutations

createNamespacedHelpers