Справочник API

Vuex.Store

import Vuex from 'vuex';

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

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

state

  • тип: Object | Function

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

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

mutations

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

    Регистрирует доступные для хранилища мутации. Обработчики мутаций первым аргументом всегда получают state (при использовании модулей это будет локальный 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>

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

    Подробнее

strict

  • тип: Boolean

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

    Заставляет хранилище Vuex использовать strict mode. В strict mode любые изменения состояния, происходящие за пределами обработчиков мутаций, будут выбрасывать ошибки.

    Подробнее

Свойства экземпляра 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)
  • dispatch(action: Object, options?: Object)

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

replaceState

  • replaceState(state: Object)

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

watch

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

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

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

subscribe

  • subscribe(handler: Function): Function

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

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

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

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

subscribeAction

  • subscribeAction(handler: Function): Function

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

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

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

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

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

registerModule

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

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

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

unregisterModule

  • unregisterModule(path: string | Array<string>)

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

hotUpdate

  • hotUpdate(newOptions: Object)

Осуществляет горячую замену действий и мутаций. Подробнее

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

mapState

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

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

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

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

mapGetters

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

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

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

mapActions

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

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

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

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

mapMutations

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

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

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

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

createNamespacedHelpers

  • createNamespacedHelpers(namespace: string): Object

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