add vuepress lang-ja directory (#1278)

docs/.vuepress/config.js

@@ -9,6 +9,11 @@ module.exports = {
       lang: 'zh-CN',
       title: 'Vuex',
       description: 'Vue.js 的中心化状态管理方案'
+    },
+    '/ja/': {
+      lang: 'ja',
+      title: 'Vuex',
+      description: 'Vue.js のための集中状態管理'
     }
   },
   serviceWorker: true,
@@ -98,6 +103,46 @@ module.exports = {
           '/zh/testing',
           '/zh/hot-reload'
         ]
+      },
+      '/ja/': {
+        label: '日本語',
+        selectText: '言語',
+        editLinkText: 'GitHub 上でこのページを編集する',
+        nav: [{
+            text: 'ガイド',
+            link: '/ja/getting-started'
+          },
+          {
+            text: 'API リファレンス',
+            link: '/ja/api'
+          },
+          {
+            text: 'リリースノート',
+            link: 'https://github.com/vuejs/vuex/releases'
+          }
+        ],
+        sidebar: [
+          '/ja/installation',
+          '/ja/',
+          '/ja/getting-started',
+          {
+            title: 'コアコンセプト',
+            collapsable: false,
+            children: [
+              '/ja/state',
+              '/ja/getters',
+              '/ja/mutations',
+              '/ja/actions',
+              '/ja/modules'
+            ]
+          },
+          '/ja/structure',
+          '/ja/plugins',
+          '/ja/strict',
+          '/ja/forms',
+          '/ja/testing',
+          '/ja/hot-reload'
+        ]
       }
     }
   }

docs/ja/README.md

@@ -0,0 +1,66 @@
+# Vuex とは何か？
+
+Vuex は Vue.js アプリケーションのための **状態管理パターン + ライブラリ**です。
+これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
+また Vue 公式の[開発ツール拡張](https://github.com/vuejs/vue-devtools)と連携し、設定なしでタイムトラベルデバッグやステートのスナップショットのエクスポートやインポートのような高度な機能を提供します。
+
+### "状態管理パターン"とはなんですか？
+
+単純な Vue で作られたカウンターアプリをみてみましょう:
+
+``` js
+new Vue({
+  // state
+  data () {
+    return {
+      count: 0
+    }
+  },
+  // view
+  template: `
+    <div>{{ count }}</div>
+  `,
+  // actions
+  methods: {
+    increment () {
+      this.count++
+    }
+  }
+})
+```
+
+これはいくつかの要素をアプリ自身に含んでいます:
+
+- **状態**、これは私達のアプリを動かす信頼できる情報源(the source of truth)です。
+- **ビュー**、これは**状態**のただの宣言的なマッピングです。
+- **アクション**、これは**ビュー**からのユーザー入力に反応して、状態の変更を可能にする方法です。
+
+これらは"単方向データフロー"のコンセプトの極めてシンプルな責務です:
+
+<p style="text-align: center; margin: 2em">
+  <img style="width:100%;max-width:450px;" src="/flow.png">
+</p>
+
+しかし、単純さは、**共通の状態を共有する複数のコンポーネントを持ったときに**、すぐに破綻します:
+
+- 複数のビューが同じ状態に依存することがあります。
+- 異なるビューからのアクションで、同じ状態を変更する必要があります。
+
+一つ目は、プロパティ (props) として深く入れ子になったコンポーネントに渡すのは面倒で、兄弟コンポーネントでは単純に機能しません。二つ目は、親子のインスタンスを直接参照したり、イベントを介して複数の状態のコピーを変更、同期することを試みるソリューションに頼っていることがよくあります。これらのパターンは、いずれも脆く、すぐにメンテナンスが困難なコードに繋がります。
+
+では、コンポーネントから共有している状態を抽出し、それをグローバルシングルトンで管理するのはどうでしょうか？ これにより、コンポーネントツリーは大きな "ビュー" となり、どのコンポーネントもツリー内のどこにあっても状態にアクセスしたり、アクションをトリガーできます!
+
+さらに、状態管理に関わる概念を定義、分離し、特定のルールを敷くことで、コードの構造と保守性を向上させることができます。
+
+これが Vuex の背景にある基本的なアイディアであり、[Flux](https://facebook.github.io/flux/docs/overview.html)、 [Redux](http://redux.js.org/) そして [The Elm Architecture](https://guide.elm-lang.org/architecture/)から影響を受けています。
+他のパターンと異なるのは、Vuex は効率的な更新のために、Vue.js の粒度の細かいリアクティビティシステムを利用するよう特別に調整して実装されたライブラリだということです。
+
+![vuex](/vuex.png)
+
+### いつ、Vuexを使うべきでしょうか？
+
+Vuex は、共有状態の管理に役立ちますが、さらに概念やボイラープレートのコストがかかります。これは、短期的生産性と長期的生産性のトレードオフです。
+
+もし、あなたが大規模な SPA を構築することなく、Vuex を導入した場合、冗長で恐ろしいと感じるかもしれません。そう感じることは全く普通です。あなたのアプリがシンプルであれば、Vuex なしで問題ないでしょう。単純な [グローバルイベントバス](http://jp.vuejs.org/v2/guide/components.html#%E8%A6%AA%E5%AD%90%E9%96%93%E4%BB%A5%E5%A4%96%E3%81%AE%E9%80%9A%E4%BF%A1) が必要なだけかもしれません。しかし、中規模から大規模の SPA を構築する場合は、Vue コンポーネントの外の状態をどうやってうまく扱うか考える絶好の機会です。Vuex は自然な次のステップとなるでしょう。これは Redux の作者、Dan Abramov からの良い引用です:
+
+> Flux ライブラリは眼鏡のようなものです: それらが必要になったときに知るのです。

docs/ja/actions.md

@@ -0,0 +1,176 @@
+# アクション
+
+アクションはミューテーションと似ていますが、下記の点で異なります:
+
+- アクションは、状態を変更するのではなく、ミューテーションをコミットします。
+- アクションは任意の非同期処理を含むことができます。
+
+シンプルなアクションを登録してみましょう:
+
+``` js
+const store = new Vuex.Store({
+  state: {
+    count: 0
+  },
+  mutations: {
+    increment (state) {
+      state.count++
+    }
+  },
+  actions: {
+    increment (context) {
+      context.commit('increment')
+    }
+  }
+})
+```
+
+アクションハンドラはストアインスタンスのメソッドやプロパティのセットと同じものを呼び出せるコンテキストオブジェクトを受け取ります。したがって `context.commit` を呼び出すことでミューテーションをコミットできます。あるいは `context.state` や `context.getters` で、状態やゲッターにアクセスできます。なぜコンテキストオブジェクトがストアインスタンスそのものではないのかは、後ほど[モジュール](modules.md)で説明します。
+
+実際にはコードを少しシンプルにするために ES2015 の[引数分割束縛（argument destructuring）](https://github.com/lukehoban/es6features#destructuring)がよく使われます（特に `commit` を複数回呼び出す必要があるとき）:
+
+``` js
+actions: {
+  increment ({ commit }) {
+    commit('increment')
+  }
+}
+```
+
+### アクションのディスパッチ
+
+アクションは `store.dispatch` がトリガーとなって実行されます:
+
+``` js
+store.dispatch('increment')
+```
+
+これは一見ばかげて見えるかもしれません。つまり、カウントをインクリメントしたいときに、どうして直接 `store.commit('increment')` を呼び出してミューテーションをコミットしないのか、と。**ミューテーションは同期的でなければならない**というのを覚えていますか？アクションはそうではありません。アクションの中では**非同期**の操作を行うことができます。
+
+``` js
+actions: {
+  incrementAsync ({ commit }) {
+    setTimeout(() => {
+      commit('increment')
+    }, 1000)
+  }
+}
+```
+
+アクションはペイロード形式とオブジェクトスタイルのディスパッチをサポートします:
+
+``` js
+// ペイロードを使ってディスパッチする
+store.dispatch('incrementAsync', {
+  amount: 10
+})
+
+// オブジェクトを使ってディスパッチする
+store.dispatch({
+  type: 'incrementAsync',
+  amount: 10
+})
+```
+
+より実践的な例として、ショッピングカートをチェックアウトするアクションを挙げます。このアクションは**非同期な API の呼び出し**と、**複数のミューテーションのコミット**をします:
+
+``` js
+actions: {
+  checkout ({ commit, state }, products) {
+    // 現在のカート内の商品を保存する
+    const savedCartItems = [...state.cart.added]
+    // チェックアウトのリクエストを送信し、楽観的にカート内をクリアする
+    commit(types.CHECKOUT_REQUEST)
+    // shop API は成功時のコールバックと失敗時のコールバックを受け取る
+    shop.buyProducts(
+      products,
+      // 成功時の処理
+      () => commit(types.CHECKOUT_SUCCESS),
+      // 失敗時の処理
+      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
+    )
+  }
+}
+```
+
+一連の非同期の処理を実行しつつ、ミューテーションのコミットによってのみ副作用（状態の変更）を与えていることに注意してください。
+
+### コンポーネント内でのアクションのディスパッチ
+
+`this.$store.dispatch('xxx')` でコンポーネント内でアクションをディスパッチできます。あるいはコンポーネントのメソッドを `store.dispatch` にマッピングする `mapActions` ヘルパーを使うこともできます（ルートの `store` の注入が必要です）:
+
+``` js
+import { mapActions } from 'vuex'
+
+export default {
+  // ...
+  methods: {
+    ...mapActions([
+      'increment', // `this.increment()` を `this.$store.dispatch('increment')` にマッピングする
+      // `mapActions` もペイロードをサポートする:
+      'incrementBy' // `this.incrementBy(amount)` を `this.$store.dispatch('incrementBy', amount)` にマッピングする
+    ]),
+    ...mapActions({
+      add: 'increment' // `this.add()` を `this.$store.dispatch('increment')` にマッピングする
+    })
+  }
+}
+```
+
+### アクションを構成する
+
+アクションはしばしば非同期処理を行いますが、アクションが完了したことをどうやって知れば良いのでしょう？そしてもっと重要なことは、さらに複雑な非同期処理を取り扱うために、どうやって複数のアクションを構成させるかということです。
+
+まず知っておくべきことは `store.dispatch` がトリガーされたアクションハンドラによって返された Promise を処理できることと、`store.dispatch` もまた Promise を返すことです。
+
+``` js
+actions: {
+  actionA ({ commit }) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        commit('someMutation')
+        resolve()
+      }, 1000)
+    })
+  }
+}
+```
+
+すると次のようにできます:
+
+``` js
+store.dispatch('actionA').then(() => {
+  // ...
+})
+```
+
+また別のアクションで下記のように書くと:
+
+``` js
+actions: {
+  // ...
+  actionB ({ dispatch, commit }) {
+    return dispatch('actionA').then(() => {
+      commit('someOtherMutation')
+    })
+  }
+}
+```
+
+最終的に [async / await](https://tc39.github.io/ecmascript-asyncawait/) を使用することで、次のようにアクションを組み合わせることができます:
+
+``` js
+// `getData()` と `getOtherData()` が Promise を返すことを想定している
+
+actions: {
+  async actionA ({ commit }) {
+    commit('gotData', await getData())
+  },
+  async actionB ({ dispatch, commit }) {
+    await dispatch('actionA') // `actionA` が完了するのを待機する
+    commit('gotOtherData', await getOtherData())
+  }
+}
+```
+
+> `store.dispatch` で異なるモジュール内の複数のアクションハンドラをトリガーすることができます。そのようなケースでは、全てのトリガーされたハンドラが解決されたときに解決する Promise が戻り値として返ってくることになります。

docs/ja/api.md

@@ -0,0 +1,253 @@
+---
+sidebar: auto
+---
+
+# API リファレンス
+
+## Vuex.Store
+
+``` js
+import Vuex from 'vuex'
+
+const store = new Vuex.Store({ ...options })
+  ```
+
+## Vuex.Store コンストラクタオプション
+
+### state
+
+  - 型: `Object | Function`
+
+    ストアのための ルートステートオブジェクトです。[詳細](state.md)
+
+    オブジェクトを返す関数を渡す場合、返されたオブジェクトはルートステートとして使用されます。これは特にモジュールの再利用のためにステートオブジェクトを再利用する場合に便利です。[詳細](modules.md#モジュールの再利用)
+
+### mutations
+
+  - 型: `{ [type: string]: Function }`
+
+    ストアにミューテーションを登録します。ハンドラ関数は第一引数に `state` を常に受け取り(モジュール内で定義されていれば、モジュールのローカルステートを受け取り)、指定されていれば第二引数に `payload` を受け取ります。
+
+    [詳細](mutations.md)
+
+### actions
+
+  - 型: `{ [type: string]: Function }`
+
+    ストアにアクションを登録します。ハンドラ関数は次のプロパティを持つ `context` オブジェクトを受け取ります。:
+
+    ``` js
+    {
+      state,      // `store.state` と同じか、モジュール内にあればローカルステート
+      rootState,  // `store.state` と同じ。ただしモジュール内に限る
+      commit,     // `store.commit` と同じ
+      dispatch,   // `store.dispatch` と同じ
+      getters,    // `store.getters` と同じか、モジュール内にあればローカルゲッター
+      rootGetters // `store.getters` と同じ。ただしモジュール内に限る
+    }
+    ```
+
+    そして、第 2 引数の `payload` があれば、それを受け取ります。
+
+    [詳細](actions.md)
+
+### getters
+
+  - type: `{ [key: string]: Function }`
+
+    ストアにゲッターを登録します. ゲッター関数は次の引数を受け取ります:
+
+    ```
+    state,     // モジュール内で定義されていればモジュールのローカルステート
+    getters    // store.getters と同じ
+    ```
+
+    モジュールで定義されたときの仕様
+    
+    ```
+    state,       // モジュールで定義された場合、モジュールのローカルステート
+    getters,     // 現在のモジュールのモジュールのローカルゲッター
+    rootState,   // グローバルステート
+    rootGetters  // 全てのゲッター
+    ```
+
+    登録されたゲッターは `store.getters` 上に公開されます。
+
+    [詳細](getters.md)
+
+### modules
+
+  - 型: `Object`
+
+    サブモジュールを含む次のような形式のオブジェクトはストアにマージされます。
+
+    ``` js
+    {
+      key: {
+        state,
+        mutations
+        actions?,
+        getters?,
+        modules?
+    
+      },
+      ...
+    }
+    ```
+
+    各モジュールは、ルートオプションに似た `state` と `mutations` を含むことができます。モジュールの状態は、モジュールのキーを使って、ストアのルートステートに結合されます。モジュールのミューテーションとゲッターは、第一引数としてルートステートの代わりに、モジュールのローカルステートだけを受け取り、モジュールのアクションの `context.state` もローカルステートを指すようになります。
+
+    [詳細](modules.md)
+
+### plugins
+
+  - 型: `Array<Function>`
+
+    プラグイン関数の配列は、ストアに適用されます。このプラグインは、ストアだけを引数として受け取り、外部への永続化、ロギング、デバッギングのために、ミューテーションを監視するか、または、 websocket や observable のような外から渡されるデータのためにミューテーションをディスパッチします。
+
+    [詳細](plugins.md)
+
+### strict
+
+  - 型: `Boolean`
+  - デフォルト: `false`
+
+    Vuex ストアを厳格モードにします。厳格モードでは、ミューテーションハンドラ以外で、 Vuex の状態の変更を行うと、エラーが投げられます。
+
+    [詳細](strict.md)
+
+## Vuex.Store インスタンスプロパティ
+
+### state
+
+  - type: `Object`
+
+    ルートステート、読み取り専用です。
+
+### getters
+
+  - type: `Object`
+
+    登録されているゲッターを公開します。読み取り専用です。
+
+## Vuex.Store インスタンスメソッド
+
+### commit
+
+- **`commit(type: string, payload?: any, options?: Object)`**
+- **`commit(mutation: Object, options?: Object)`**
+
+  ミューテーションをコミットします。`options` は[名前空間付きモジュール](modules.md#名前空間)で root なミューテーションにコミットできる `root: true` を持つことできます。[詳細](mutations.md)
+
+### dispatch
+
+- **`dispatch(type: string, payload?: any, options?: Object)`**
+- **`dispatch(action: Object, options?: Object)`**
+
+  アクションをディスパッチします。`options` は[名前空間付きモジュール](modules.md#名前空間)で root なアクションにディスパッチできる `root: true` を持つことできます。 すべてのトリガーされたアクションハンドラを解決するPromiseを返します。[詳細](actions.md)
+
+### replaceState
+
+- **`replaceState(state: Object)`**
+
+  ストアのルートステートを置き換えます。これは、ステートのハイドレーションやタイムトラベルのためだけに利用すべきです。
+
+### watch
+
+- **`watch(getter: Function, cb: Function, options?: Object)`**
+
+  リアクティブにゲッター関数の返す値を監視します。値が変わった場合は、コールバックを呼びます。ゲッターはストアの `state` を最初の引数として、 `getters` を2番目の引数として受け取ります。 Vue の`vm.$watch`メソッドと同じオプションをオプションのオブジェクトとして受け付けます。
+
+  監視を止める場合は、ハンドラ関数の返り値を関数として呼び出します。
+
+### subscribe
+
+- **`subscribe(handler: Function)`**
+
+  ストアへのミューテーションを購読します。`handler` は、全てのミューテーションの後に呼ばれ、引数として、ミューテーション ディスクリプタとミューテーション後の状態を受け取ります。
+
+  ``` js
+  store.subscribe((mutation, state) => {
+    console.log(mutation.type)
+    console.log(mutation.payload)
+  })
+  ```
+
+  プラグインの中でもっともよく利用されます。[詳細](plugins.md)
+
+### subscribeAction
+
+- **`subscribeAction(handler: Function)`**
+
+  > 2.5.0 で新規追加
+
+  ストアアクションを購読します。`handler` はディスパッチされたアクションごとに呼び出され、アクション記述子と現在のストア状態を引数として受け取ります:
+
+  ``` js
+  store.subscribeAction((action, state) => {
+    console.log(action.type)
+    console.log(action.payload)
+  })
+  ```
+
+　プラグインで最も一般的に使用されます。[Details](plugins.md)
+
+### registerModule
+
+- **`registerModule(path: string | Array<string>, module: Module, options?: Object)`**
+
+  動的なモジュールを登録します。[詳細](modules.md#dynamic-module-registration)
+
+  `options` は前の状態を保存する `preserveState: true` を持つことができます。サーバサイドレンダリングに役立ちます。
+
+### unregisterModule
+
+- **`unregisterModule(path: string | Array<string>)`**
+
+  動的なモジュールを解除します。[詳細](modules.md#dynamic-module-registration)
+
+### hotUpdate
+
+- **`hotUpdate(newOptions: Object)`**
+
+  新しいアクションとミューテーションをホットスワップします。[詳細](hot-reload.md)
+
+## コンポーネントをバインドするヘルパー
+
+### mapState
+
+- **`mapState(namespace?: string, map: Array<string> | Object): Object`**
+
+  ストアのサブツリーを返すコンポーネントの computed オプションを作成します。[詳細](state.md#the-mapstate-helper)
+
+  第1引数は、オプションで名前空間文字列にすることができます。[詳細](modules.md#binding-helpers-with-namespace)
+
+### mapGetters
+
+- **`mapGetters(namespace?: string, map: Array<string> | Object): Object`**
+
+  ゲッターの評価後の値を返すコンポーネントの computed オプションを作成します。[詳細](getters.md#the-mapgetters-helper)
+
+  第1引数は、オプションで名前空間文字列にすることができます。[詳細](modules.md#binding-helpers-with-namespace)
+
+### mapActions
+
+- **`mapActions(namespace?: string, map: Array<string> | Object): Object`**
+
+  アクションをディスパッチするコンポーネントの methods オプションを作成します。[詳細](actions.md#dispatching-actions-in-components)
+
+  第1引数は、オプションで名前空間文字列にすることができます。[詳細](modules.md#binding-helpers-with-namespace)
+
+### mapMutations
+
+- **`mapMutations(namespace?: string, map: Array<string> | Object): Object`**
+
+  ミューテーションをコミットするコンポーネントの methods オプションを作成します。[詳細](mutations.md#commiting-mutations-in-components)
+
+  第1引数は、オプションで名前空間文字列にすることができます。[詳細](modules.md#binding-helpers-with-namespace)
+
+### createNamespaceHelpers
+
+- **`createNamespacedHelpers(namespace: string): Object`**
+
+  名前空間付けられたコンポーネントバインディングのヘルパーを作成します。返されるオブジェクトは指定された名前空間にバインドされた `mapState`、`mapGetters`、`mapActions` そして `mapMutations` が含まれます。[詳細はこちら](modules.md#binding-helpers-with-namespace)

docs/ja/core-concepts.md

@@ -0,0 +1,12 @@
+# コアコンセプト
+
+この章では、Vuex のコアコンセプトについて、以下を学習します。
+  - [ステート](state.md)
+  - [ゲッター](getters.md)
+  - [ミューテーション](mutations.md)
+  - [アクション](actions.md)
+  - [モジュール](modules.md)
+
+これらのコンセプトを深く理解することは、Vuex を使用するにあたって不可欠です。
+
+それでは、始めましょう！

docs/ja/forms.md

@@ -0,0 +1,59 @@
+# フォームの扱い
+
+厳格モードで Vuex を使用するとき、Vuex に属する状態の一部で `v-model` を使用するのは少しトリッキーです:
+
+``` html
+<input v-model="obj.message">
+```
+
+`obj` がストアからオブジェクトを返す算出プロパティ (computed property) と仮定すると、`v-model` は input でユーザーが入力するとき、直接 `obj.message` を変更します。厳格モードでは、この変更は明示的に Vuex のミューテーションハンドラ内部で処理されていないため、エラーを投げます。
+
+それに対処するための "Vuex way" は、`<input>` の値をバインディングし、`input` または `change` イベントでアクションを呼び出すことです:
+
+``` html
+<input :value="message" @input="updateMessage">
+```
+``` js
+// ...
+computed: {
+  ...mapState({
+    message: state => state.obj.message
+  })
+},
+methods: {
+  updateMessage (e) {
+    this.$store.commit('updateMessage', e.target.value)
+  }
+}
+```
+
+ミューテーションのハンドラは以下のようになります:
+
+``` js
+// ...
+mutations: {
+  updateMessage (state, message) {
+    state.obj.message = message
+  }
+}
+```
+
+### 双方向算出プロパティ
+
+確かに、上記の例は単純な `v-model` と ローカルステートよりもかなり冗長で、`v-model` のいくつかの有用な機能が使えません。代わりに、セッターで双方向算出プロパティを使うアプローチがあります。
+
+``` html
+<input v-model="message">
+```
+``` js
+computed: {
+  message: {
+    get () {
+      return this.$store.state.obj.message
+    },
+    set (value) {
+      this.$store.commit('updateMessage', value)
+    }
+  }
+}
+```

docs/ja/getters.md

@@ -0,0 +1,115 @@
+# ゲッター
+
+例えば項目のリストをフィルタリングしたりカウントするときのように、ストアの状態を算出したいときがあります。
+
+``` js
+computed: {
+  doneTodosCount () {
+    return this.$store.state.todos.filter(todo => todo.done).length
+  }
+}
+```
+
+もしこの関数を複数のコンポーネントで利用したくなったら、関数をコピーするか、あるいは関数を共用のヘルパーに切り出して複数の場所でインポートする必要があります。しかし、どちらも理想的とはいえません。
+
+Vuex を利用するとストア内に "ゲッター" を定義することができます。それらをストアの算出プロパティと考えることができます。算出プロパティと同様に、ゲッターの結果はその依存関係に基づいて計算され、依存関係の一部が変更されたときにのみ再評価されます。
+
+ゲッターは第1引数として、state を受け取ります:
+
+``` js
+const store = new Vuex.Store({
+  state: {
+    todos: [
+      { id: 1, text: '...', done: true },
+      { id: 2, text: '...', done: false }
+    ]
+  },
+  getters: {
+    doneTodos: state => {
+      return state.todos.filter(todo => todo.done)
+    }
+  }
+})
+```
+
+### プロパティスタイルアクセス
+
+ゲッターは `store.getters` オブジェクトから取り出され、プロパティとしてアクセスすることができます:
+
+``` js
+store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
+```
+
+ゲッターは第2引数として他のゲッターを受け取ります:
+
+``` js
+getters: {
+  // ...
+  doneTodosCount: (state, getters) => {
+    return getters.doneTodos.length
+  }
+}
+```
+
+``` js
+store.getters.doneTodosCount // -> 1
+```
+
+どのコンポーネントの内部でも簡単にゲッターを利用することができます:
+
+``` js
+computed: {
+  doneTodosCount () {
+    return this.$store.getters.doneTodosCount
+  }
+}
+```
+
+プロパティとしてアクセスされるゲッターは Vue のリアクティブシステムの一部としてキャッシュされるという点に留意してください。
+
+### メソッドスタイルアクセス
+
+関数を返り値にすることで、ゲッターに引数を渡すこともできます。これは特にストアの中の配列を検索する時に役立ちます：
+```js
+getters: {
+  // ...
+  getTodoById: (state) => (id) => {
+    return state.todos.find(todo => todo.id === id)
+  }
+}
+```
+
+``` js
+store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
+```
+
+メソッドによってアクセスされるゲッターは呼び出す度に実行され、その結果はキャッシュされない点に留意してください。
+
+### `mapGetters` ヘルパー
+
+`mapGetters` ヘルパーはストアのゲッターをローカルの算出プロパティにマッピングさせます:
+
+``` js
+import { mapGetters } from 'vuex'
+
+export default {
+  // ...
+  computed: {
+    // ゲッターを、スプレッド演算子（object spread operator）を使って computed に組み込む
+    ...mapGetters([
+      'doneTodosCount',
+      'anotherGetter',
+      // ...
+    ])
+  }
+}
+```
+
+ゲッターを異なる名前でマッピングさせたいときはオブジェクトを使います:
+
+``` js
+...mapGetters({
+  // `this.doneCount` を `store.getters.doneTodosCount` にマッピングさせる
+  doneCount: 'doneTodosCount'
+})
+```

docs/ja/getting-started.md

@@ -0,0 +1,44 @@
+# Vuex 入門
+
+Vuex アプリケーションの中心にあるものは**ストア**です。"ストア" は、基本的にアプリケーションの**状態（state）**を保持するコンテナです。単純なグローバルオブジェクトとの違いが 2つあります。
+
+1. Vuex ストアはリアクティブです。Vue コンポーネントがストアから状態を取り出すとき、もしストアの状態が変化したら、ストアはリアクティブかつ効率的に更新を行います。
+
+2. ストアの状態を直接変更することはできません。明示的に**ミューテーションをコミットする**ことによってのみ、ストアの状態を変更します。これによって、全ての状態の変更について追跡可能な記録を残すことが保証され、ツールでのアプリケーションの動作の理解を助けます。
+
+### シンプルなストア
+
+> **注意:** 私たちは、このドキュメントのコード例に ES2015 のシンタックスを利用しています。 もし触れたことがなければ、[ぜひ触れてください](https://babeljs.io/docs/learn-es2015/)！
+
+Vuex を[インストール](installation.md) してから、ストアをつくってみましょう。Vuex ストアの作成は、とても簡単です。ストアオブジェクトの初期状態と、いくつかのミューテーションを準備するだけです。
+
+``` js
+// モジュールシステムを利用しているときはあらかじめ Vue.use(Vuex) を呼び出していることを確認しておいてください
+
+const store = new Vuex.Store({
+  state: {
+    count: 0
+  },
+  mutations: {
+    increment (state) {
+      state.count++
+    }
+  }
+})
+```
+
+これで `store.state` でストアオブジェクトの状態を参照でき、また `store.commit` メソッドで状態の変更を行うことができます。
+
+``` js
+store.commit('increment')
+
+console.log(store.state.count) // -> 1
+```
+
+そして `store.state.count` を直接変更する代わりにミューテーションをコミットする理由は、状態の変更を明確に追跡したいからです。このシンプルな規約は、あなたのコードの意図をさらに明確にし、コードを読んだ時にアプリケーションの状態の変更について、論理的に考えることができるようにします。加えて、私たちに全ての変更のログを取ったり、状態のスナップショットを取ったり、タイムトラベルデバッグを行うようなツールを実装する余地を与えてくれます。
+
+ストアオブジェクトの状態はリアクティブなので、ストアの状態をコンポーネント内で使うには算出プロパティ内でただ状態を返せば良いです。コンポーネントメソッドでミューテーションをコミットすることによって状態の変更を行います。
+
+こちらが [Vuex を使った最も基本的なカウンターアプリの例](https://jsfiddle.net/n9jmu5v7/1269/)です。
+
+これから Vuex のコアコンセプトについて詳しく説明していきます。まずは[状態（state）](state.md)からはじめましょう。

docs/ja/hot-reload.md

@@ -0,0 +1,44 @@
+# ホットリローディング
+
+Vuex は webpack の [Hot Module Replacement API](https://webpack.js.org/guides/hot-module-replacement/) を使用することで、アプリケーションの開発を行っている間のミューテーション、モジュール、アクション、ゲッターのホットリローディングをサポートします。Browserify では [browserify-hmr](https://github.com/AgentME/browserify-hmr/) プラグインを使用することができます。
+
+ミューテーションとモジュールのホットリローディングのために、`store.hotUpdate()`  API メソッドを利用する必要があります:
+
+``` js
+// store.js
+import Vue from 'vue'
+import Vuex from 'vuex'
+import mutations from './mutations'
+import moduleA from './modules/a'
+
+Vue.use(Vuex)
+
+const state = { ... }
+
+const store = new Vuex.Store({
+  state,
+  mutations,
+  modules: {
+    a: moduleA
+  }
+})
+
+if (module.hot) {
+  // ホットモジュールとしてアクションとモジュールを受け付けます
+  module.hot.accept(['./mutations', './modules/a'], () => {
+    // 更新されたモジュールをインポートする
+    // babel 6 のモジュール出力のため、ここでは .default を追加しなければならない
+    const newActions = require('./actions').default
+    const newMutations = require('./mutations').default
+    // 新しいアクションとミューテーションにスワップ
+    store.hotUpdate({
+      mutations: newMutations,
+      modules: {
+        a: newModuleA
+      }
+    })
+  })
+}
+```
+
+ホットリローディングを試したい場合は、[counter-hot example](https://github.com/vuejs/vuex/tree/dev/examples/counter-hot)をチェックアウトしてください。

docs/ja/installation.md

@@ -0,0 +1,50 @@
+# インストール
+
+### 直接ダウンロードする / CDN
+
+[https://unpkg.com/vuex](https://unpkg.com/vuex)
+
+<!--email_off-->
+[Unpkg.com](https://unpkg.com) で NPM ベースの CDN リンクが提供されています。上記リンクは常に NPM の最新のリリースを指します。`https://unpkg.com/vuex@2.0.0` のような URL によって特定のバージョン/タグを利用することもできます。
+<!--/email_off-->
+
+Vue のあとで `vuex` を取り込むと自動的に Vuex が導入されます:
+
+``` html
+<script src="/path/to/vue.js"></script>
+<script src="/path/to/vuex.js"></script>
+```
+
+### NPM
+
+``` bash
+npm install vuex --save
+```
+
+### Yarn
+
+``` bash
+yarn add vuex
+```
+
+モジュールシステムで利用される場合、 `Vue.use()` によって Vuex を明示的に導入する必要があります:
+
+``` js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+```
+
+グローバルなスクリプトタグを利用する場合にはこのようにする必要はありません。
+
+### 開発版ビルド
+
+最新の開発版ビルドを利用したい場合には、 Github から直接クローンし `vuex` を自身でビルドする必要があります。
+
+``` bash
+git clone https://github.com/vuejs/vuex.git node_modules/vuex
+cd node_modules/vuex
+npm install
+npm run build
+```

docs/ja/modules.md

@@ -0,0 +1,294 @@
+# モジュール
+
+単一ステートツリーを使うため、アプリケーションの全ての状態は、一つの大きなストアオブジェクトに内包されます。しかしながら、アプリケーションが大きくなるにつれて、ストアオブジェクトは膨れ上がってきます。
+
+そのような場合に役立てるため Vuex ではストアを**モジュール**に分割できるようになっています。それぞれのモジュールは、モジュール自身の状態（state）、ミューテーション、アクション、ゲッター、モジュールさえも内包できます（モジュールをネストできます）- トップからボトムまでフラクタル構造です:
+
+``` 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` のステート
+```
+
+### モジュールのローカルステート
+
+モジュールのミューテーションやゲッターの中では、渡される第1引数は**モジュールのローカルステート**です。
+
+``` js
+const moduleA = {
+  state: { count: 0 },
+  mutations: {
+    increment (state) {
+      // `state` はモジュールのローカルステート
+      state.count++
+    }
+  },
+
+  getters: {
+    doubleCount (state) {
+      return state.count * 2
+    }
+  }
+}
+```
+
+同様に、モジュールのアクションの中では `context.state` はローカルステートにアクセスでき、ルートのステートは `context.rootState` でアクセスできます:
+
+``` js
+const moduleA = {
+  // ...
+  actions: {
+    incrementIfOddOnRootSum ({ state, commit, rootState }) {
+      if ((state.count + rootState.count) % 2 === 1) {
+        commit('increment')
+      }
+    }
+  }
+}
+```
+
+また、モジュールのゲッターの中では、ルートのステートは第3引数でアクセスできます:
+
+``` js
+const moduleA = {
+  // ...
+  getters: {
+    sumWithRootCount (state, getters, rootState) {
+      return state.count + rootState.count
+    }
+  }
+}
+```
+
+### 名前空間
+
+デフォルトでは、アクション、ミューテーション、そしてゲッター内部のモジュールは**グローバル名前空間**の元で登録されます - これにより、複数のモジュールが同じミューテーション/アクションタイプに反応することができます。
+
+モジュールをより自己完結型にまた再利用可能なものにしたい場合は、それを `namespaced: true` によって名前空間に分けることができます。モジュールが登録されると、そのゲッター、アクション、およびミューテーションのすべてが、モジュールが登録されているパスに基づいて自動的に名前空間に入れられます。例えば:
+
+``` 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']
+          }
+        }
+      }
+    }
+  }
+})
+```
+
+名前空間のゲッターとアクションは、ローカライズされた `getters`、`dispatch`、`commit` を受け取ります。言い換えれば、同じモジュールに接頭辞 (prefix) を書き込まずに、モジュールアセットを使用することができます。名前空間オプションの切り替えは、モジュール内のコードには影響しません。
+
+#### 名前空間付きモジュールでのグローバルアセットへのアクセス
+
+グローバルステートとゲッターを使いたい場合、`rootState` と `rootGetters` はゲッター関数の第3引数と第4引数として渡され、アクション関数に渡される `context` オブジェクトのプロパティとしても公開されます。
+
+アクションをディスパッチするか、グローバル名前空間にミューテーションをコミットするには、`dispatch` と `commit` の3番目の引数として `{root: true}` を渡します。
+
+``` 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) { ... }
+    }
+  }
+}
+```
+
+#### 名前空間によるバインディングヘルパー
+
+`mapState`、`mapGetters`、`mapActions`、そして `mapMutations` ヘルパーを使って名前空間付きモジュールをコンポーネントにバインディングするとき、少し冗長になります:
+
+``` 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'
+  ])
+}
+```
+
+このような場合は、第1引数としてモジュールの名前空間文字列をヘルパーに渡すことで、そのモジュールをコンテキストとして使用してすべてのバインディングを行うことができます。上記は次のように単純化できます。
+
+``` js
+computed: {
+  ...mapState('some/nested/module', {
+    a: state => state.a,
+    b: state => state.b
+  })
+},
+methods: {
+  ...mapActions('some/nested/module', [
+    'foo',
+    'bar'
+  ])
+}
+```
+
+さらに、`createNamespacedHelpers` を使用することによって名前空間付けされたヘルパーを作成できます。指定された名前空間の値にバインドされた新しいコンポーネントバインディングヘルパーを持つオブジェクトを返します:
+
+``` 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'
+    ])
+  }
+}
+```
+
+#### プラグイン開発者向けの注意事項
+
+モジュールを提供する[プラグイン](plugins.md)を作成し、ユーザーがそれらを Vuex ストアに追加できるようにすると、モジュールの予測できない名前空間が気になるかもしれません。あなたのモジュールは、プラグインユーザーが名前空間付きモジュールの元にモジュールを追加すると、その名前空間に属するようになります。この状況に適応するには、プラグインオプションを使用して名前空間の値を受け取る必要があります。
+
+``` js
+// プラグインオプションで名前空間値を取得し、
+// そして、Vuex プラグイン関数を返す
+export function createPlugin (options = {}) {
+  return function (store) {
+    /// 名前空間をプラグインモジュールの型に追加する
+    const namespace = options.namespace || ''
+    store.dispatch(namespace + 'pluginAction')
+  }
+}
+```
+
+### 動的にモジュールを登録する
+
+ストアが作られた**後**に `store.registerModule` メソッドを使って、モジュールを登録できます:
+
+``` js
+// `myModule` モジュールを登録します
+store.registerModule('myModule', {
+  // ...
+})
+
+// ネストされた `nested/myModule` モジュールを登録します
+store.registerModule(['nested', 'myModule'], {
+  // ...
+})
+```
+
+モジュールのステートには `store.state.myModule` と `store.state.nested.myModule` でアクセスします。
+
+動的なモジュール登録があることで、他の Vue プラグインが、モジュールをアプリケーションのストアに付属させることで、状態の管理に Vuex を活用できます。例えば [`vuex-router-sync`](https://github.com/vuejs/vuex-router-sync) ライブラリは、動的に付属させたモジュール内部でアプリケーションのルーティングのステートを管理することで vue-router と vuex を統合しています。
+
+`store.unregisterModule(moduleName)` を呼び出せば、動的に登録したモジュールを削除できます。ただしストア作成（store creation）の際に宣言された、静的なモジュールはこのメソッドで削除できないことに注意してください。
+
+サーバサイドレンダリングされたアプリケーションから状態を保持するなど、新しいモジュールを登録するときに、以前の状態を保持したい場合があります。`preserveState` オプション(`store.registerModule('a', module, { preserveState: true })`)でこれを実現できます。
+
+### モジュールの再利用
+
+時どき、モジュールの複数インスタンスを作成する必要があるかもしれません。例えば:
+
+- 同じモジュールを使用する複数のストアを作成する;
+- 同じストアに同じモジュールを複数回登録する
+
+モジュールの状態を宣言するために単純なオブジェクトを使用すると、その状態オブジェクトは参照によって共有され、変更時にクロスストア/モジュールの状態汚染を引き起こします。(例: `runInNewContext` オプションが `false` または `'once'` のとき、[SSR ではステートフルなシングルトンは避けます](https://ssr.vuejs.org/ja/structure.html#ステートフルなシングルトンの回避)。)
+
+これは、実際には Vue コンポーネント内部の `data` と全く同じ問題です。従って解決策も同じです。モジュールの状態を宣言するために関数を使用してください (2.3.0 以降でサポートされます):
+
+``` js
+const MyReusableModule = {
+  state () {
+    return {
+      foo: 'bar'
+    }
+  },
+  // ミューテーション、アクション、ゲッター...
+}
+```

docs/ja/mutations.md

@@ -0,0 +1,172 @@
+# ミューテーション
+
+実際に Vuex のストアの状態を変更できる唯一の方法は、ミューテーションをコミットすることです。Vuex のミューテーションはイベントにとても近い概念です: 各ミューテーションは**タイプ**と**ハンドラ**を持ちます。ハンドラ関数は Vuex の状態（state）を第1引数として取得し、実際に状態の変更を行います:
+
+``` js
+const store = new Vuex.Store({
+  state: {
+    count: 1
+  },
+  mutations: {
+    increment (state) {
+      // 状態を変更する
+      state.count++
+    }
+  }
+})
+```
+
+直接ミューテーションハンドラを呼び出すことはできません。この mutations オプションは、どちらかいうと "タイプが `increment` のミューテーションがトリガーされたときに、このハンドラが呼ばれる" といったイベント登録のようなものです。ミューテーションハンドラを起動するためにはミューテーションのタイプを指定して `store.commit` を呼び出す必要があります:
+
+``` js
+store.commit('increment')
+```
+
+### 追加の引数を渡してコミットする
+
+`store.commit` に追加の引数を渡すこともできます。この追加の引数は、特定のミューテーションに対する**ペイロード**と呼びます:
+
+``` js
+// ...
+mutations: {
+  increment (state, n) {
+    state.count += n
+  }
+}
+```
+
+``` js
+store.commit('increment', 10)
+```
+
+ほとんどの場合、ペイロードはオブジェクトにすべきです。そうすることで複数のフィールドを含められるようになり、またミューテーションがより記述的に記録されるようになります:
+
+``` js
+// ...
+mutations: {
+  increment (state, payload) {
+    state.count += payload.amount
+  }
+}
+```
+
+``` js
+store.commit('increment', {
+  amount: 10
+})
+```
+
+### オブジェクトスタイルのコミット
+
+また `type` プロパティを持つオブジェクトを使って、ミューテーションをコミットすることもできます:
+
+``` js
+store.commit({
+  type: 'increment',
+  amount: 10
+})
+```
+
+オブジェクトスタイルでコミットするとき、オブジェクト全体がペイロードとしてミューテーションハンドラに渡されます。したがってハンドラの例は上記と同じです:
+
+``` js
+mutations: {
+  increment (state, payload) {
+    state.count += payload.amount
+  }
+}
+```
+
+
+### Vue のリアクティブなルールに則ったミューテーション
+
+Vuex ストアの状態は Vue によってリアクティブになっているので、状態を変更すると、状態を監視している Vue コンポーネントは自動的に更新されます。これは Vuex のミューテーションは、通常の Vue と動作させているときと同じく、リアクティブな値に関する注意が必要であることを意味します:
+
+1. あらかじめ全ての必要なフィールドによって、ストアの初期状態を初期化することが望ましいです
+
+2. 新しいプロパティをオブジェクトに追加するとき、以下のいずれかが必要です:
+
+  - `Vue.set(obj, 'newProp', 123)` を使用する。あるいは
+
+  - 全く新しいオブジェクトで既存のオブジェクトを置き換える。例えば、stage-3 の[スプレッドシンタックス（object spread syntax）](https://github.com/sebmarkbage/ecmascript-rest-spread) を使用して、次のように書くことができます:
+
+    ``` js
+    state.obj = { ...state.obj, newProp: 123 }
+    ```
+
+### ミューテーション・タイプに定数を使用する
+
+いろいろな Flux 実装において、ミューテーション・タイプに定数を使用することが共通して見られるパターンです。これはコードに対してリントツールのようなツールを利用できるという利点があり、また単一ファイルに全ての定数を設定することによって、共同で作業する人に、アプリケーション全体で何のミューテーションが可能であるかを一目見ただけで理解できるようにします:
+
+``` js
+// mutation-types.js
+export const SOME_MUTATION = 'SOME_MUTATION'
+```
+
+``` js
+// store.js
+import Vuex from 'vuex'
+import { SOME_MUTATION } from './mutation-types'
+
+const store = new Vuex.Store({
+  state: { ... },
+  mutations: {
+    // 定数を関数名として使用できる ES2015 の算出プロパティ名（computed property name）機能を使用できます
+    [SOME_MUTATION] (state) {
+      // 状態を変更する
+    }
+  }
+})
+```
+
+定数を使用するかどうかは好みの問題です。多くの開発者による大規模なプロジェクトで役に立ちますが、完全にオプションなので、もしお気に召さなければ使用しなくても構いません。
+
+### ミューテーションは同期的でなければならない
+
+ひとつの重要なルールを覚えておきましょう。それは**ミューテーションハンドラ関数は同期的でなければならない**ということです。なぜか？次の例で考えてみましょう:
+
+``` js
+mutations: {
+  someMutation (state) {
+    api.callAsyncMethod(() => {
+      state.count++
+    })
+  }
+}
+```
+
+いま、開発ツールのミューテーションのログを見ながら、アプリケーションのデバッグを行っていることを想像してください。全てのミューテーションをログに記録するためには、ミューテーションの前後の状態のスナップショットを捕捉することが必要です。しかし、上の例にあるミューテーション内の非同期コールバックは、それを不可能にします: そのコールバックは、ミューテーションがコミットされた時点ではまだ呼び出されていません。そして、コールバックが実際にいつ呼び出されるかを、開発ツールは知る術がありません。いかなる状態変更でも、コールバック内で起きる場合は本質的に追跡不可能です。
+
+### コンポーネント内におけるミューテーションのコミット
+
+`this.$store.commit('xxx')` と書くか、もしくはコンポーネントのメソッドを `store.commit` にマッピングする `mapMutations` ヘルパーを呼び出すこと（ルートの `store` の注入が必要）で、コンポーネント内でミューテーションをコミットできます:
+
+``` js
+import { mapMutations } from 'vuex'
+
+export default {
+  // ...
+  methods: {
+    ...mapMutations([
+      'increment', // `this.increment()` を `this.$store.commit('increment')` にマッピングする
+
+      // mapMutations はペイロードサポートする:
+      'incrementBy' // `this.incrementBy(amount)` を `this.$store.commit('incrementBy', amount)` にマッピングする
+    ]),
+    ...mapMutations({
+      add: 'increment' // `this.add()` を `this.$store.commit('increment')` にマッピングする
+    })
+  }
+}
+```
+
+### アクションへ向けて
+
+状態変更を非同期に組み合わせることは、プログラムの動きを予測することを非常に困難にします。例えば、状態を変更する非同期コールバックを持った 2つのメソッドを両方呼び出すとき、それらがいつ呼び出されたか、どちらが先に呼び出されたかを、どうやって知ればよいのでしょう？これがまさに、状態変更と非同期の 2つの概念を分離したいという理由です。Vuex では**全てのミューテーションは同期的に行う**という作法になっています:
+
+``` js
+store.commit('increment')
+// "increment" ミューテーションによる状態変更は、この時点で行われるべきです
+```
+
+非同期的な命令を扱うために[アクション](actions.md)を見てみましょう。

docs/ja/plugins.md

@@ -0,0 +1,126 @@
+# プラグイン
+
+Vuex ストア は、各ミューテーションへのフックを公開する `plugins` オプションを受け付けます。 Vuex プラグインは、単一の引数としてストアを受けつけるただの関数です:
+
+``` js
+const myPlugin = store => {
+  // ストアが初期化されたときに呼ばれます
+  store.subscribe((mutation, state) => {
+    // それぞれのミューテーションの後に呼ばれます
+    // ミューテーションは `{ type, payload }` の形式で提供されます
+  })
+}
+```
+
+そして、このように利用することができます:
+
+``` js
+const store = new Vuex.Store({
+  // ...
+  plugins: [myPlugin]
+})
+```
+
+### プラグイン内でのミューテーションのコミット
+
+プラグインは直接、状態を変更できません。これはコンポーネントに似ています。プラグインはコンポーネント同様に、ミューテーションのコミットによる変更のトリガーだけで状態を変更できます。
+
+ミューテーションのコミットによるストアとデータソースの同期をプラグインで実現できます。 websocket データソースとストアを例にします (これは不自然な例です。実際には、さらに複雑なタスクのために `createPlugin` 関数は、追加でいくつかのオプションを受け取れます):
+
+``` js
+export default function createWebSocketPlugin (socket) {
+  return store => {
+    socket.on('data', data => {
+      store.commit('RECEIVE_DATA', data)
+    })
+    store.subscribe((mutation) => {
+      if (mutation.type === 'UPDATE_DATA') {
+        socket.emit('update', mutation.payload)
+      }
+    })
+  }
+}
+```
+
+``` js
+const plugin = createWebSocketPlugin(socket)
+
+const store = new Vuex.Store({
+  state,
+  mutations,
+  plugins: [plugin]
+})
+```
+
+### 状態のスナップショットを撮る
+
+時々、状態の"スナップショット"を撮って、ミューテーション前後の状態を比較したくなることがあるでしょう。それを実現するために、状態オブジェクトのディープコピーを行う必要があります:
+
+``` js
+const myPluginWithSnapshot = store => {
+  let prevState = _.cloneDeep(store.state)
+  store.subscribe((mutation, state) => {
+    let nextState = _.cloneDeep(state)
+
+    // `prevState` と `nextState` を比較...
+
+    // 次のミューテーションのために状態を保存
+    prevState = nextState
+  })
+}
+```
+
+**状態のスナップショットを撮るプラグインはアプリケーションの開発の間だけ使われるべきです。**  webpack や Browserify を使っていれば、ビルドツールにそれを処理させることができます:
+
+``` js
+const store = new Vuex.Store({
+  // ...
+  plugins: process.env.NODE_ENV !== 'production'
+    ? [myPluginWithSnapshot]
+    : []
+})
+```
+
+上のように記述すれば、プラグインはデフォルトで利用されることになります。本番環境( production ) では、 `process.env.NODE_ENV !== 'production'` を `false` に置き換えるために、 webpack では[DefinePlugin](https://webpack.js.org/plugins/define-plugin/) 、 Browserify では[envify](https://github.com/hughsk/envify) が必要になります。
+
+### ビルトインロガープラグイン
+
+> もし、あなたが [vue-devtools](https://github.com/vuejs/vue-devtools) を使っている場合は、これは不要でしょう。
+
+Vuex には、一般的なデバッグに利用する用途の備え付けのロガープラグインがあります。
+
+```js
+import createLogger from 'vuex/dist/logger'
+
+const store = new Vuex.Store({
+  plugins: [createLogger()]
+})
+```
+
+`createLogger` 関数はいくつかのオプションを受け取ります:
+
+``` js
+const logger = createLogger({
+  collapsed: false, // ログ出力されたミューテーションを自動で展開します
+  filter (mutation, stateBefore, stateAfter) {
+    // ミューテーションを記録する必要がある場合は、`true` を返します
+    // `mutation` は `{ type, payload }` です
+    return mutation.type !== "aBlacklistedMutation"
+  },
+  transformer (state) {
+    // ロギングの前に、状態を変換します
+    // 例えば、特定のサブツリーのみを返します
+    return state.subTree
+  },
+  mutationTransformer (mutation) {
+    // ミューテーションは、`{ type, payload }` の形式でログ出力されます
+    // 任意の方法でそれをフォーマットできます
+    return mutation.type
+  },
+  logger: console, // `console` API の実装, デフォルトは `console`
+})
+```
+
+ロガーファイルは、他にも `<script>` タグで直接読み込むことができ、`createVuexLogger` 関数がグローバルに公開されます。
+
+ロガープラグインは、状態のスナップショットを撮ることに注意しましょう。スナップショットを撮ることはコストがかかるため、開発中だけ利用してください。

docs/ja/state.md

@@ -0,0 +1,106 @@
+# ステート
+
+### 単一ステートツリー
+
+Vuex は **単一ステートツリー (single state tree)** を使います。つまり、この単一なオブジェクトはアプリケーションレベルの状態が全て含まれており、"信頼できる唯一の情報源 (single source of truth)" として機能します。これは、通常、アプリケーションごとに1つしかストアは持たないことを意味します。単一ステートツリーは状態の特定の部分を見つけること、デバッグのために現在のアプリケーションの状態のスナップショットを撮ることを容易にします。
+
+単一ステートツリーはモジュール性と競合しません。以降の章で、アプリケーションの状態とミューテーション(変更)をサブモジュールに分割する方法について説明します。
+
+### Vuex の状態を Vue コンポーネントに入れる
+
+ストアにある状態を Vue コンポーネント に表示するにはどうすればよいのでしょう？　Vuex ストア はリアクティブなので、ストアから状態を"取り出す"一番シンプルな方法は、単純にいくつかのストアの状態を [算出プロパティ](https://jp.vuejs.org/guide/computed.html) で返すことです。
+
+```js
+// Counter コンポーネントをつくってみましょう
+const Counter = {
+  template: `<div>{{ count }}</div>`,
+  computed: {
+    count () {
+      return store.state.count
+    }
+  }
+}
+```
+
+`store.state.count` が変わるたび、算出プロパティの再評価が発生し、関連した DOM の更新をトリガーします。
+
+しかし、このパターンでは、コンポーネントがグローバルストアシングルトンに依存してしまいます。 モジュールシステムを使っているとき、ストアの状態を使っているすべてのコンポーネントでインポートが必要です。また、コンポーネントのテストのときにモック化が必要となります。
+
+Vuex は、ルートコンポーネントに `store` オプションを指定することで (これは、 `Vue.use(Vuex)` で有効にできます)、すべての子コンポーネントにストアを "注入" する機構を提供しています:
+
+```js
+const app = new Vue({
+  el: '#app',
+  // "store" オプションで指定されたストアは、全ての子コンポーネントに注入されます
+  store,
+  components: { Counter },
+  template: `
+    <div class="app">
+      <counter></counter>
+    </div>
+  `
+})
+```
+
+ルートインスタンスに `store` オプションを渡すことで、渡されたストアをルートの全ての子コンポーネントに注入します。これは `this.$store` で各コンポーネントから参照することができます。 `Counter` の実装を変更しましょう:
+
+```js
+const Counter = {
+  template: `<div>{{ count }}</div>`,
+  computed: {
+    count () {
+      return this.$store.state.count
+    }
+  }
+}
+```
+
+### `mapState`  ヘルパー
+
+コンポーネントが複数のストアのステートプロパティやゲッターを必要としているとき、これらすべてにおいて、算出プロパティを宣言することは繰り返しで冗長です。これに対処するため、算出ゲッター関数を生成し、いくつかのキーストロークを省くのに役立つ `mapState` ヘルパーを使うことができます:
+
+```js
+// 完全ビルドでは、ヘルパーは Vuex.mapState として公開されています
+import { mapState } from 'vuex'
+
+export default {
+  // ...
+  computed: mapState({
+    // アロー関数は、コードをとても簡潔にできます！
+    count: state => state.count,
+    // 文字列を渡すことは、`state => state.count` と同じです
+    countAlias: 'count',
+    // `this` からローカルステートを参照するときは、通常の関数を使わなければいけません
+    countPlusLocalState (state) {
+      return state.count + this.localCount
+    }
+  })
+}
+```
+
+マップされた算出プロパティの名前がステートサブツリーの名前と同じ場合は、文字列配列を `mapState` に渡すこともできます。
+
+```js
+computed: mapState([
+  // map this.count to store.state.count
+  'count'
+])
+```
+
+### オブジェクトスプレッド演算子
+
+`mapState` はオブジェクトを返すことに注意しましょう。どうやって、他のローカル算出プロパティと組み合わせるのでしょうか？ 通常、最終的にひとつのオブジェクトを `computed` に渡せるように、複数のオブジェクトをひとつにマージするユーティリティを使わなければいけません。しかし、[オブジェクトスプレッド演算子](https://github.com/sebmarkbage/ecmascript-rest-spread) (ECMAScript プロポーサルの state-4 です) で、シンタックスをかなり単純にできます:
+
+```js
+computed: {
+  localComputed () { /* ... */ },
+  // オブジェクトスプレット演算子で、外のオブジェクトとこのオブジェクトを混ぜる
+  ...mapState({
+    // ...
+  })
+}
+```
+
+### コンポーネントはまだローカルステートを持つことできる
+
+Vuex を使うということは、**全て**の状態を Vuex の中に置くべき、というわけではありません。多くの状態を Vuex に置くことで、状態の変更がさらに明示的、デバッグ可能になりますが、ときにはコードを冗長でまわりくどいものにします。状態の一部がひとつのコンポーネントだけに属している場合は、それをローカルの状態として残しておくとよいでしょう。あなたは、トレードオフを考慮した上で、あなたのアプリの開発ニーズに合った決定をすべきです。

docs/ja/strict.md

@@ -0,0 +1,25 @@
+# 厳格モード
+
+厳格（strict）モードを有効にするには Vuex store を作成するときに、ただ `strict: true` を指定するだけです:
+
+``` js
+const store = new Vuex.Store({
+  // ...
+  strict: true
+})
+```
+
+厳格モードでは Vuex の状態がミューテーションハンドラの外部で変更されたら、エラーを投げるようになります。これで全ての状態変更がデバッギングツールで明示的に追跡できることが保証されます。
+
+### 開発環境 vs 本番環境
+
+**本番環境で厳格モードを有効にしてデプロイしてはいけません！**厳格モードでは不適切なミューテーションを検出するためにステートツリーに対して深い監視を実行します。パフォーマンスコストを回避するために本番環境では無効にしてください。
+
+プラグインと同様に、ビルドツールに処理させることができます:
+
+``` js
+const store = new Vuex.Store({
+  // ...
+  strict: process.env.NODE_ENV !== 'production'
+})
+```

docs/ja/structure.md

@@ -0,0 +1,32 @@
+# アプリケーションの構造
+
+Vuex は実際のところ、あなたがコードを構造化する方法を制限しません。もっと正確に言うと、それより高いレベルの原理原則を適用させます:
+
+1. アプリケーションレベルの状態はストアに集約されます。
+
+2. 状態を変更する唯一の方法は、同期的に処理を行う**ミューテーション**をコミットすることのみです。
+
+3. 非同期的なロジックはカプセル化されるべきであり、それは**アクション**によって構成されます。
+
+これらのルールに従っている限り、プロジェクトをどのように構造化するかはあなた次第です。もしストアファイルが大きくなり過ぎたら、単純にアクションやミューテーション、ゲッターをそれぞれ別のファイルに切り出すことができます。
+
+それなりに手の込んだアプリケーションであれば、モジュールを活用する必要が出てきそうです。プロジェクトの構造の例は以下のようになります:
+
+``` bash
+├── index.html
+├── main.js
+├── api
+│   └── ... # API 呼び出しを抽象化する
+├── components
+│   ├── App.vue
+│   └── ...
+└── store
+    ├── index.js          # モジュールを集めてストアをエクスポートする
+    ├── actions.js        # アクションのルートファイル
+    ├── mutations.js      # ミューテーションのルートファイル
+    └── modules
+        ├── cart.js       # cart モジュール
+        └── products.js   # products モジュール
+```
+
+参考として [Shopping Cart Example](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart) をみてみるのもよいでしょう。

docs/ja/testing.md

@@ -0,0 +1,221 @@
+# テスト
+
+私たちが Vuex でユニットテストしたい主な部分はミューテーションとアクションです。
+
+### ミューテーションのテスト
+
+ミューテーションは完全に引数に依存しているだけの関数であるため、テストするのがとても簡単です。効果的なやり方として、もし ES2015 のモジュールを使っていて `store.js` ファイルの中にミューテーションがあるなら、デフォルトエクスポートに加えて、名前付きエクスポートでミューテーションをエクスポートできます。
+
+``` js
+const state = { ... }
+
+// 名前付きエクスポートでミューテーションをエクスポートする
+export const mutations = { ... }
+
+export default new Vuex.Store({
+  state,
+  mutations
+})
+```
+
+Mocha + Chai を使用してミューテーションをテストする例です（あなたの好きな任意のフレームワーク/アサーションライブラリを使用できます）:
+
+``` js
+// mutations.js
+export const mutations = {
+  increment: state => state.count++
+}
+```
+
+``` js
+// mutations.spec.js
+import { expect } from 'chai'
+import { mutations } from './store'
+
+// ミューテーションの分割束縛
+const { increment } = mutations
+
+describe('mutations', () => {
+  it('INCREMENT', () => {
+    // ステートのモック
+    const state = { count: 0 }
+    // ミューテーションを適用する
+    increment(state)
+    // 結果を検証する
+    expect(state.count).to.equal(1)
+  })
+})
+```
+
+### アクションのテスト
+ 
+アクションは外部の API を呼び出す可能性があるため、ミューテーションのテストよりも少し注意が必要です。アクションをテストするとき、通常、いくつかの段階でモックを作る必要があります。例えば API 呼び出しをサービスとして抽象化し、そしてテストの内部ではそのサービスをモックにすることができます。簡単に依存関係をモック化するために、webpack と [inject-loader](https://github.com/plasticine/inject-loader) を使ってテストファイルをバンドルすることができます。
+
+非同期なアクションのテストの例:
+
+``` js
+// actions.js
+import shop from '../api/shop'
+
+export const getAllProducts = ({ commit }) => {
+  commit('REQUEST_PRODUCTS')
+  shop.getProducts(products => {
+    commit('RECEIVE_PRODUCTS', products)
+  })
+}
+```
+
+``` js
+// actions.spec.js
+
+// inline loader のために require 構文を使用する
+// ここでは inject-loader を使って、モック化された依存関係を注入できるようにするモジュールファクトリーを返す
+import { expect } from 'chai'
+const actionsInjector = require('inject-loader!./actions')
+
+// モックによってモジュールを作成する
+const actions = actionsInjector({
+  '../api/shop': {
+    getProducts (cb) {
+      setTimeout(() => {
+        cb([ /* レスポンスのモック */ ])
+      }, 100)
+    }
+  }
+})
+
+// 期待されるミューテーションをアクションが呼び出すかをテストするためのヘルパー
+const testAction = (action, payload, state, expectedMutations, done) => {
+  let count = 0
+
+  // コミットをモックする
+  const commit = (type, payload) => {
+    const mutation = expectedMutations[count]
+
+    try {
+      expect(type).to.equal(mutation.type)
+      if (payload) {
+        expect(payload).to.deep.equal(mutation.payload)
+      }
+    } catch (error) {
+      done(error)
+    }
+
+    count++
+    if (count >= expectedMutations.length) {
+      done()
+    }
+  }
+
+  // モック化したストアと引数でアクションを呼び出す
+  action({ commit, state }, payload)
+
+  // 呼び出されるべきミューテーションが残っていないか確認する
+  if (expectedMutations.length === 0) {
+    expect(count).to.equal(0)
+    done()
+  }
+}
+
+describe('actions', () => {
+  it('getAllProducts', done => {
+    testAction(actions.getAllProducts, null, {}, [
+      { type: 'REQUEST_PRODUCTS' },
+      { type: 'RECEIVE_PRODUCTS', payload: { /* レスポンスのモック */ } }
+    ], done)
+  })
+})
+```
+
+### ゲッターのテスト
+
+もしゲッターが複雑な計算を行っているならば、テストコードを書く価値があります。ゲッターはミューテーションと同様の理由でテストしやすいです。
+
+ゲッターのテストの例:
+
+``` js
+// getters.js
+export const getters = {
+  filteredProducts (state, { filterCategory }) {
+    return state.products.filter(product => {
+      return product.category === filterCategory
+    })
+  }
+}
+```
+
+``` js
+// getters.spec.js
+import { expect } from 'chai'
+import { getters } from './getters'
+
+describe('getters', () => {
+  it('filteredProducts', () => {
+    // ステートをモックする
+    const state = {
+      products: [
+        { id: 1, title: 'Apple', category: 'fruit' },
+        { id: 2, title: 'Orange', category: 'fruit' },
+        { id: 3, title: 'Carrot', category: 'vegetable' }
+      ]
+    }
+    // ゲッターをモックする
+    const filterCategory = 'fruit'
+
+    // ゲッターから結果を受け取る
+    const result = getters.filteredProducts(state, { filterCategory })
+
+    // 結果を検証する
+    expect(result).to.deep.equal([
+      { id: 1, title: 'Apple', category: 'fruit' },
+      { id: 2, title: 'Orange', category: 'fruit' }
+    ])
+  })
+})
+```
+
+### テストの実行
+
+ミューテーションやアクションが適切に書かれている場合は、適切にモック化された後、テストコードはブラウザの API に直接依存関係を持つことはないでしょう。したがって、単純に webpack でテストをバンドルでき、それを直接 Node で実行できます。別の方法として、本当のブラウザでテストを実行するためには `mocha-loader` または Karma + `karma-webpack` を使用できます。
+
+#### Node での実行
+
+以下のような webpack の設定を作成します（[`.babelrc`](https://babeljs.io/docs/usage/babelrc/) もあわせて使います）:
+
+``` js
+// webpack.config.js
+module.exports = {
+  entry: './test.js',
+  output: {
+    path: __dirname,
+    filename: 'test-bundle.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      }
+    ]
+  }
+}
+```
+
+それから下記コマンドを実行します:
+
+``` bash
+webpack
+mocha test-bundle.js
+```
+
+#### ブラウザでの実行
+
+1. `mocha-loader` をインストールする
+2. 上記 webpack 設定から `entry` を `'mocha-loader!babel-loader!./test.js'` に変更する
+3. 設定を使用して `webpack-dev-server` を開始する
+4. ブラウザで `localhost:8080/webpack-dev-server/test-bundle` を開く 
+
+#### Karma + karma-webpack を使ったブラウザでの実行
+
+[vue-loader ドキュメント](https://vue-loader.vuejs.org/ja/workflow/testing.html) 内のセットアップ方法を参考にしてください。