vuex-help

<!DOCTYPE HTML> <html lang="ru" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Модули · 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="next" href="structure.html" /> <link rel="prev" href="actions.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 active" 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 " 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="." >Модули</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="модули">Модули</h1> Из-за использования единого дерева состояния, все глобальные данные приложения оказываются помещены в один большой объект. По мере роста приложения, хранилище может существенно раздуться. Чтобы помочь в этой беде, Vuex позволяет разделять хранилище на модули. Каждый модуль может содержать собственное состояние, мутации, действия, геттеры и даже встроенные подмодули — структура фрактальна: <pre class="language-"><code class="lang-js">const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> состояние модуля `moduleA` store.state.b // -> состояние модуля `moduleB` </code></pre> <h3 id="локальное-состояние-модулей">Локальное состояние модулей</h3> Первым аргументом, который получают мутации и геттеры, будет локальное состояние модуля. <pre class="language-"><code class="lang-js">const moduleA = { state: { count: 0 }, mutations: { increment (state) { // `state` указывает на локальное состояние модуля state.count++ } }, getters: { doubleCount (state) { return state.count * 2 } } } </code></pre> Аналогично, <code>context.state</code> в действиях также указывает на локальное состояние модуля, а корневое — доступно в <code>context.rootState</code>: <pre class="language-"><code class="lang-js">const moduleA = { // ... actions: { incrementIfOddOnRootSum ({ state, commit, rootState }) { if ((state.count + rootState.count) % 2 === 1) { commit('increment') } } } } </code></pre> Кроме того, в геттеры корневое состояние передаётся 3-м параметром: <pre class="language-"><code class="lang-js">const moduleA = { // ... getters: { sumWithRootCount (state, getters, rootState) { return state.count + rootState.count } } } </code></pre> <h3 id="пространства-имён">Пространства имён</h3> По умолчанию действия, мутации и геттеры внутри модулей регистрируются в глобальном пространстве имён — это позволяет нескольким модулям реагировать на тот же тип мутаций/действий. Если вы хотите сделать модули более самодостаточными и готовыми для переиспользования, вы можете создать его с собственным пространством имён, указав опцию <code>namespaced: true</code>. Когда модуль будет зарегистрирован, все его геттеры, действия и мутации будут автоматически связаны с этим пространством имён, основываясь на пути по которому зарегистрирован модуль. Например: <pre class="language-"><code class="lang-js">const store = new Vuex.Store({ modules: { account: { namespaced: true, // содержимое модуля state: { ... }, // состояние модуля автоматически вложено и не зависит от опции пространства имён getters: { isAdmin () { ... } // -> getters['account/isAdmin'] }, actions: { login () { ... } // -> dispatch('account/login') }, mutations: { login () { ... } // -> commit('account/login') }, // вложенные модули modules: { // наследует пространство имён из родительского модуля myPage: { state: { ... }, getters: { profile () { ... } // -> getters['account/profile'] } }, // большая вложенность с собственным пространством имён posts: { namespaced: true, state: { ... }, getters: { popular () { ... } // -> getters['account/posts/popular'] } } } } } }) </code></pre> Геттеры и действия с собственным пространством имён будут получать свои локальные <code>getters</code>, <code>dispatch</code> и <code>commit</code>. Другими словами, вы можете использовать содержимое модуля без написания префиксов в том же модуле. Переключения между пространствами имён не влияет на код внутри модуля. <h4 id="доступ-к-глобальному-содержимому-в-модулях-со-своим-пространством-имён">Доступ к глобальному содержимому в модулях со своим пространством имён</h4> Если вы хотите использовать глобальное состояние и геттеры, <code>rootState</code> и <code>rootGetters</code> передаются 3-м и 4-м аргументами в функции геттеров, а также как свойства в объекте <code>context</code>, передаваемом в функции действий. Для запуска действий или совершения мутаций в глобальном пространстве имён нужно добавить <code>{ root: true }</code> 3-м аргументом в <code>dispatch</code> и <code>commit</code>. <pre class="language-"><code class="lang-js">modules: { foo: { namespaced: true, getters: { // `getters` ограничены геттерами данного модуля // вы можете использовать rootGetters из 4-го аргумента геттеров someGetter (state, getters, rootState, rootGetters) { getters.someOtherGetter // -> 'foo/someOtherGetter' rootGetters.someOtherGetter // -> 'someOtherGetter' }, someOtherGetter: state => { ... } }, actions: { // dispatch и commit также ограничены данным модулем // они принимают опцию `root` для вызова в глобальном пространстве имён someAction ({ dispatch, commit, getters, rootGetters }) { getters.someGetter // -> 'foo/someGetter' rootGetters.someGetter // -> 'someGetter' dispatch('someOtherAction') // -> 'foo/someOtherAction' dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction' commit('someMutation') // -> 'foo/someMutation' commit('someMutation', null, { root: true }) // -> 'someMutation' }, someOtherAction (ctx, payload) { ... } } } } </code></pre> <h4 id="подключение-с-помощью-вспомогательных-функций-к-пространству-имён">Подключение с помощью вспомогательных функций к пространству имён</h4> Подключение модуля со своим пространством имён к компонентам с помощью вспомогательных функций <code>mapState</code>, <code>mapGetters</code>, <code>mapActions</code> и <code>mapMutations</code> это может выглядеть подобным образом: <pre class="language-"><code class="lang-js">computed: { ...mapState({ a: state => state.some.nested.module.a, b: state => state.some.nested.module.b }) }, methods: { ...mapActions([ 'some/nested/module/foo', 'some/nested/module/bar' ]) } </code></pre> В таких случаях вы можете передать строку с пространством имён в качестве первого аргумента к вспомогательным функциям, тогда все привязки будут выполнены в контексте этого модуля. Пример выше можно упростить до: <pre class="language-"><code class="lang-js">computed: { ...mapState('some/nested/module', { a: state => state.a, b: state => state.b }) }, methods: { ...mapActions('some/nested/module', [ 'foo', 'bar' ]) } </code></pre> Кроме того, вы можете создать вспомогательные функции с помощью <code>createNamespacedHelpers</code>. Она возвращает объект, в котором все вспомогательные функции для связывания с компонентами будут указывать на переданное пространство имён: <pre class="language-"><code class="lang-js">import { createNamespacedHelpers } from 'vuex' const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') export default { computed: { // будет указывать на `some/nested/module` ...mapState({ a: state => state.a, b: state => state.b }) }, methods: { // будет указывать на `some/nested/module` ...mapActions([ 'foo', 'bar' ]<s