vuex-help

<!DOCTYPE HTML> <html lang="ru" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Справочник API · Vuex</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content=""> <meta name="generator" content="GitBook 3.2.3"> <link rel="stylesheet" href="../gitbook/style.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-theme-vuejs/vue.css"> <meta name="HandheldFriendly" content="true"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png"> <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon"> <link rel="prev" href="hot-reload.html" /> </head> <body> <div class="book"> <div class="book-summary"> <div id="book-search-input" role="search"> <input type="text" placeholder="Введите условия поиска" /> </div> <nav role="navigation"> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script> <ul class="summary"> <li class="chapter " data-level="1.1" data-path="./"> <a href="./"> Introduction </a> </li> <li class="chapter " data-level="1.2" > <a target="_blank" href="https://github.com/vuejs/vuex/releases"> История изменений </a> </li> <li class="chapter " data-level="1.3" data-path="installation.html"> <a href="installation.html"> Установка </a> </li> <li class="chapter " data-level="1.4" data-path="intro.html"> <a href="intro.html"> Что такое Vuex? </a> </li> <li class="chapter " data-level="1.5" data-path="getting-started.html"> <a href="getting-started.html"> Начало работы </a> </li> <li class="chapter " data-level="1.6" data-path="core-concepts.html"> <a href="core-concepts.html"> Основные понятия </a> <ul class="articles"> <li class="chapter " data-level="1.6.1" data-path="state.html"> <a href="state.html"> Состояние </a> </li> <li class="chapter " data-level="1.6.2" data-path="getters.html"> <a href="getters.html"> Геттеры </a> </li> <li class="chapter " data-level="1.6.3" data-path="mutations.html"> <a href="mutations.html"> Мутации </a> </li> <li class="chapter " data-level="1.6.4" data-path="actions.html"> <a href="actions.html"> Действия </a> </li> <li class="chapter " data-level="1.6.5" data-path="modules.html"> <a href="modules.html"> Модули </a> </li> </ul> </li> <li class="chapter " data-level="1.7" data-path="structure.html"> <a href="structure.html"> Структура приложения </a> </li> <li class="chapter " data-level="1.8" data-path="plugins.html"> <a href="plugins.html"> Плагины </a> </li> <li class="chapter " data-level="1.9" data-path="strict.html"> <a href="strict.html"> Строгий режим (strict mode) </a> </li> <li class="chapter " data-level="1.10" data-path="forms.html"> <a href="forms.html"> Обработка форм </a> </li> <li class="chapter " data-level="1.11" data-path="testing.html"> <a href="testing.html"> Тестирование </a> </li> <li class="chapter " data-level="1.12" data-path="hot-reload.html"> <a href="hot-reload.html"> Горячая замена </a> </li> <li class="chapter active" data-level="1.13" data-path="api.html"> <a href="api.html"> Справочник API </a> </li> <li class="divider"></li> <li> <a href="https://www.gitbook.com" target="blank" class="gitbook-link"> Опубликовано с помощью GitBook </a> </li> </ul> </nav> </div> <div class="book-body"> <div class="body-inner"> <div class="book-header" role="navigation">  <h1> <a href="." >Справочник API</a> </h1> </div> <div class="page-wrapper" tabindex="-1" role="main"> <div class="page-inner"> <div id="book-search-results"> <div class="search-noresults"> <section class="normal markdown-section"> <h1 id="справочник-api">Справочник API</h1> <h3 id="vuexstore">Vuex.Store</h3> <pre class="language-"><code class="lang-js">import Vuex from 'vuex' const store = new Vuex.Store({ ...options }) </code></pre> <h3 id="опции-конструктора-vuexstore">Опции конструктора Vuex.Store</h3> <ul> <li>state <ul> <li>тип: <code>Object | Function</code> Корневой объект состояния хранилища Vuex. <a href="state.html">Подробнее</a> Если вы передаёте функцию, возвращающую объект, то возвращаемый объект будет использован в качестве корневого состояния. Это может быть полезным, если вы хотите повторно использовать объект состояния, особенно при повторном использовании модулей. <a href="modules.html#повторное-использование-модулей">Подробнее</a> </li> </ul> </li> <li>mutations <ul> <li>тип: <code>{ [type: string]: Function }</code> Регистрирует доступные для хранилища мутации. Обработчики мутаций первым аргументом всегда получают <code>state</code> (при использовании модулей это будет локальный state модуля). Вторым аргументом передаётся "нагрузка" (<code>payload</code>), если она есть. <a href="mutations.html">Подробнее</a> </li> </ul> </li> <li>actions <ul> <li>тип: <code>{ [type: string]: Function }</code> Регистрирует действия хранилища. В функции-обработчики передаётся объект <code>context</code>, со следующими свойствами: <pre class="language-"><code class="lang-js">{ state, // то же, что и `store.state`, или локальный state при использовании модулей rootState, // то же, что и `store.state`, только при использовании модулей commit, // то же, что и `store.commit` dispatch, // то же, что и `store.dispatch` getters, // то же, что и `store.getters` rootGetters // то же, что и `store.getters`, только в модулях } </code></pre> <a href="actions.html">Подробнее</a> </li> </ul> </li> <li>getters <ul> <li>тип: <code>{ [key: string]: Function }</code> Регистрирует геттеры, используемые в хранилище. Геттер-функции при вызове получают следующие аргументы: <pre class="language-"><code>state, // при использовании модулей — локальный state модуля getters // то же, что и store.getters </code></pre>При определении в модуле <pre class="language-"><code>state, // при использовании модулей — локальный state модуля getters, // локальные геттеры текущего модуля rootState, // глобальный state rootGetters // все геттеры </code></pre>Зарегистрированные геттеры далее доступны в <code>store.getters</code>. <a href="getters.html">Подробнее</a> </li> </ul> </li> <li>modules <ul> <li>тип: <code>Object</code> Объект, содержащий подмодули для помещения в хранилище, в формате: <pre class="language-"><code class="lang-js">{ key: { state, namespaced?, mutations?, actions?, getters?, modules? }, ... } </code></pre> Каждый модуль может содержать <code>state</code> и <code>mutations</code>, как и корневое хранилище. Состояние модуля будет прикреплено к корневому, по указанному ключу. Мутации и геттеры модуля получают при вызове первым аргументом только локальное состояние, а не корневое. При вызове действий <code>context.state</code> аналогичным образом указывает на локальное состояние модуля. <a href="modules.html">Подробнее</a> </li> </ul> </li> <li>plugins <ul> <li>тип: <code>Array<Function></code> Массив функций-плагинов, которые будут применены к хранилищу. Плагины попросту получают хранилище в качестве единственного аргумента, и могут как отслеживать мутации (для сохранения исходящих данных, логирования или отладки) или инициировать их (для обработки входящих данных, например, веб-сокетов или наблюдателей). <a href="plugins.html">Подробнее</a> </li> </ul> </li> <li>strict <ul> <li>тип: <code>Boolean</code></li> <li>default: <code>false</code> Заставляет хранилище Vuex использовать strict mode. В strict mode любые изменения состояния, происходящие за пределами обработчиков мутаций, будут выбрасывать ошибки. <a href="strict.html">Подробнее</a> </li> </ul> </li> </ul> <h3 id="свойства-экземпляра-vuexstore">Свойства экземпляра Vuex.Store</h3> <ul> <li>state <ul> <li>тип: <code>Object</code> Корневое состояние. Только для чтения. </li> </ul> </li> <li>getters <ul> <li>тип: <code>Object</code> Зарегистрированные геттеры. Только для чтения. </li> </ul> </li> </ul> <h3 id="методы-экземпляра-vuexstore">Методы экземпляра Vuex.Store</h3> <ul> <li><code>commit(type: string, payload?: any, options?: Object) | commit(mutation: Object, options?: Object)</code> Запускает мутацию. <code>options</code> может содержать опцию <code>root: true</code> что разрешает совершать корневые (root) мутации <a href="modules.html#пространства-имён">в модулях со своим пространством имён</a>. <a href="mutations.html">Подробнее</a> </li> <li><code>dispatch(type: string, payload?: any, options?: Object) | dispatch(action: Object, options?: Object)</code> Инициирует действие. <code>options</code> может содержать опцию <code>root: true</code> что разрешает совершать корневые (root) действия <a href="modules.html#пространства-имён">в модулях со своим пространством имён</a>. Возвращает Promise который разрешает все обработчики инициируемых действий. <a href="actions.html">Подробнее</a> </li> <li><code>replaceState(state: Object)</code> Позволяет заменить корневое состояние хранилища. Используйте только для гидрации состояния / функциональности "машины времени". </li> <li><code>watch(getter: Function, cb: Function, options?: Object)</code> Устанавливает наблюдение за возвращаемым значением геттера, вызывая коллбэк в случае его изменения. Геттер получает состояние хранилища первым аргументом, и геттеры вторым аргументом. Возможно указание дополнительного объекта опций, с такими же параметрами как и у метода <code>vm.$watch</code> корневой библиотеки Vue. Для прекращения наблюдения, необходимо вызвать возвращаемую функцию обработчик. </li> <li><code>subscribe(handler: Function)</code> Подписывается на мутации хранилища. Обработчик <code>handler</code> вызывается после каждой мутации и получает в качестве параметров дескриптор мутации и состояние после мутации: <pre class="language-"><code class="lang-js">store.subscribe((mutation, state) => { console.log(mutation.type) console.log(mutation.payload) }) </code></pre> Чаще всего используется в плагинах. <a href="plugins.html">Подробнее</a> </li> <li><code>subscribeAction(handler: Function)</code> <blockquote> Добавлено в версии 2.5.0 </blockquote> Подписывается на действие хранилища. Обработчик <code>handler</code> вызывается после каждого действия и получает в качестве параметров дескриптов действия и текущее состояние хранилища: <pre class="language-"><code class="lang-js">store.subscribeAction((action, state) => { console.log(action.type) console.log(action.payload) }) </code></pre> Чаще всего используется в плагинах. <a href="plugins.html">Подробнее</a> </li> <li><code>registerModule(path: string | Array<string>, module: Module, options?: Object)</code> Регистрирует динамический модуль. <a href="modules.html#динамическая-регистрация-модулей">Подробнее</a> <code>options</code> может иметь опцию <code>preserveState: true</code>, что позволяет сохранить предыдущее состояние. Полезно с рендерингом на стороне сервера. </li> <li><code>unregisterModule(path: string | Array<string>)</code> Разрегистрирует динамический модуль. <a href="modules.html#динамическая-регистрация-модулей">Подробнее</a> </li> <li><code>hotUpdate(newOptions: Object)</code> Осуществляет горячую замену действий и мутаций. <a href="hot-reload.html">Подробнее</a> </li> </ul> <h3 id="вспомогательные-функции-для-связывания-с-компонентами">Вспомогательные функции для связывания с компонентами</h3> <ul> <li><code>mapState(namespace?: string, map: Array<string> | Object): Object</code> Создаёт проксирующие вычисляемые свойства компонента, возвращающие поддерево state'а хранилища Vuex <a href="state.html#вспомогательная-функция-mapstate">Подробнее</a> Первый аргумент опционально может быть строкой с указанным namespace. <a href="modules.html#подключение-с-помощью-вспомогательных-функций-к-пространству-имён">Подробнее</a> </li> <li><code>mapGetters(namespace?: string, map: Array<string> | Object): Object</code> Создаёт проксирующие вычисляемые свойства компонента, проксирующие доступ к геттерам. <a href="getters.html#вспомогательная-функция-mapgetters">Подробнее</a> Первый аргумент опционально может быть строкой с указанным namespace. <a href="modules.html#подключение-с-помощью-вспомогательных-функций-к-пространству-имён">Подробнее</a> </li> <li><code>mapActions(namespace?: string, map: Array<string> | Object): Object</code> Создаёт проксирующие методы компонента, позволяющие диспетчеризировать действия. <a href="actions.html#диспетчеризация-действий-в-компонентах">Подробнее</a> Первый аргумент опционально может быть строкой с указанным namespace. <a href="modules.html#подключение-с-помощью-вспомогательных-функций-к-пространству-имён">Подробнее</a> </li> <li><code>mapMutations(namespace?: string, map: Array<string> | Object): Object</code> Создаёт проксирующие методы компонента, позволяющие инициировать мутации. <a href="mutations.html#вызов-мутаций-в-компонентах">Подробнее</a> Первый аргумент опционально может быть строкой с указанным namespace. <a href="modules.html#подключение-с-помощью-вспомогательных-функций-к-пространству-имён">Подробнее</a> </li> <li><code>createNamespacedHelpers(namespace: string): Object</code> Создаёт вспомогательные функции для связывания с компонентами для указанного пространства имён. Возвращаемый объект содержит <code>mapState</code>, <code>mapGetters</code>, <code>mapActions</code> и <code>mapMutations</code>, которые связаны с указанным пространством имён. <a href