vuex-help

<!DOCTYPE HTML> <html lang="ja" > <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"> Vuex 入門 </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"> 厳格モード </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 ではストアをモジュールに分割できるようになっています。それぞれのモジュールは、モジュール自身の状態（state）、ミューテーション、アクション、ゲッター、モジュールさえも内包できます（モジュールをネストできます）- トップからボトムまでフラクタル構造です: <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> モジュールのミューテーションやゲッターの中では、渡される第1引数はモジュールのローカルステートです。 <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> を受け取ります。言い換えれば、同じモジュールに接頭辞 (prefix) を書き込まずに、モジュールアセットを使用することができます。名前空間オプションの切り替えは、モジュール内のコードには影響しません。 <h4 id="名前空間付きモジュールでのグローバルアセットへのアクセス">名前空間付きモジュールでのグローバルアセットへのアクセス</h4> グローバルステートとゲッターを使いたい場合、<code>rootState</code> と <code>rootGetters</code> はゲッター関数の第3引数と第4引数として渡され、アクション関数に渡される <code>context</code> オブジェクトのプロパティとしても公開されます。 アクションをディスパッチするか、グローバル名前空間にミューテーションをコミットするには、<code>dispatch</code> と <code>commit</code> の3番目の引数として <code>{root: true}</code> を渡します。 <pre class="language-"><code class="lang-js">modules: { foo: { namespaced: true, getters: { // `getters` はこのモジュールのゲッターにローカライズされています // ゲッターの第4引数経由で rootGetters を使うことができます someGetter (state, getters, rootState, rootGetters) { getters.someOtherGetter // -> 'foo/someOtherGetter' rootGetters.someOtherGetter // -> 'someOtherGetter' }, someOtherGetter: state => { ... } }, actions: { // ディスパッチとコミットもこのモジュール用にローカライズされています // ルートディスパッチ/コミットの `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> このような場合は、第1引数としてモジュールの名前空間文字列をヘルパーに渡すことで、そのモジュールをコンテキストとして使用してすべてのバインディングを行うことができます。上記は次のように単純化できます。 <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' ]) } } </code></pre> <h4 id="プラグイン開発者向けの注意事項">プラグイン開発者向けの注意事項</h4> モジュールを提供する<a href="plugins.html">プラグイン</a>を作成し、ユーザーがそれらを Vuex ストアに追加できるようにすると、モジュールの予測できない名前空間が気になるかもしれません。あなたのモジュールは、プラグインユーザーが名前空間付きモジュールの元にモジュールを追加すると、その名前空間に属するようになります。この状況に適応するには、プラグインオプションを使用して名前空間の値を受け取る必要があります。 <pre class="language-"><code class="lang-js">// プラグインオプションで名前空間値を取得し、 // そして、Vuex プラグイン関数を返す export function createPlugin (options = {}) { return function (store) { /// 名前空間をプラグインモジュールの型に追加する const namespace = options.namespace || '' store.dispatch(namespace + 'pluginAction') } } </code></pre> <h3 id="動的にモジュールを登録する">動的にモジュールを登録する</h3> ストアが作られた後に <code>store.registerModule</code> メソッドを使って、モジュールを登録できます: <pre class="language-"><code class="lang-js">// `myModule` モジュールを登録します store.registerModule('myModule', { // ... }) // ネストされた `nested/myModule` モジュールを登録します store.registerModule(['nested', 'myModule'], { // ... }) </code></pre> モジュールのステートには <code>store.state.myModule</code> と <code>store.state.nested.myModule</code> でアクセスします。 動的なモジュール登録があることで、他の Vue プラグインが、モジュールをアプリケーションのストアに付属させることで、状態の管理に Vuex を活用できます。例えば <a href="https://github.com/vuejs/vuex-router-sync" target="_blank"><code>vuex-router-sync</code></a> ライブラリは、動的に付属させたモジュール内部でアプリケーションのルーティングのステートを管理することで vue-router と vuex を統合しています。 <code>store.unregisterModule(moduleName)</code> を呼び出せば、動的に登録したモジュー&#x30E