Update ja document (#240)

* start commit for updating jp doc

* update ja doc summary

* update ja intro document

* add getters text

* remove duplication

* add tutorial section for ja doc

* improvement

* create getting-started ja document

* improvement

* update ja state document

* fix some

* fix some

* add actions.md for ja doc

* update data-flow document for ja

* bolden a word in ja/actions.md to consistent with en doc

* update ja mutations document

* fix

* update ja structure document until simple structure

* update ja structure document

* fix some

* update ja plugin document

* update forms.md for ja docs

* fix typo

* update ja strict document

* update hot-reload ja document

* update testing.md for ja doc

* update ja api document

* improvement

* improvement

* improvement

* update version of language index

* remove unreferenced ja documents

* fix textlint issues for ja docs

* fix typos

* fix indentation for layout

* update ja docs for 1.0-rc.2

* fix typo

* improvement

docs/LANGS.md

@@ -3,4 +3,4 @@
 * [Português (0.8, outdated)](pt/)
 * [Italiano (0.8, outdated)](it/)
 * [Español (0.8, outdated)](es/)
-* [日本語 (0.8, outdated)](ja/)
+* [日本語 (1.0)](ja/)

docs/ja/SUMMARY.md

@@ -1,15 +1,17 @@
-# Table of Contents
+# 目次
 
-> Note: The Japanese docs are currently for 0.2.x only. For the latest version please see the English docs instead.
+> 上から順番に各章を読んでください
 
-- [Vuex は何ですか？](intro.md)
-- [中核概念](concepts.md)
-  - [ステート](state.md)
+- [Vuex とは何か](intro.md)
+- [Vuex 入門](getting-started.md)
+- [チュートリアル](tutorial.md)
+- コアコンセプト
+  - [ステートとゲッター](state.md)
   - [ミューテーション](mutations.md)
   - [アクション](actions.md)
 - [データフロー](data-flow.md)
 - [アプリケーションの構造](structure.md)
-- [ミドルウェア](middlewares.md)
+- [プラグイン](plugins.md)
 - [厳格モード](strict.md)
 - [フォームのハンドリング](forms.md)
 - [テスト](testing.md)

docs/ja/actions.md

@@ -1,137 +1,199 @@
 # アクション
 
-アクションはミューテーションをディスパッチする機能です。アクションは非同期にすることができ、単一アクションは複数のミューテーションをディスパッチできます。
+> Vuex のアクションは純粋な Flux の定義では実際には "アクションクリエーター (action creators)" ですが、その用語は有用さよりも混乱を生み出していると考えられます。
 
-アクションは何かが起こるための意向を表しており、それを呼び出すコンポーネントから離れて詳細を抽象化します。コンポーネントが何かしたい場合アクション呼び出します。アクションはステート変化をもたらすため、コールバックまたは戻り値について心配する必要はなく、そしてステート変化は更新するコンポーネントの DOM をトリガします。コンポーネントは、アクションが実際に行われている方法から、完全に切り離されます。
+アクションはミューテーションをディスパッチする関数です。慣習として、 Vuex のアクションは常に1番目の引数にストアのインスタンスを受け取ることが期待され、2番目以降にはオプショナルな追加の引数が続きます。
 
-それゆえ、通常アクション内部のデータエンドポイントへの API 呼び出しを行い、そしてアクションを呼び出すコンポーネントの両方から非同期に詳細を隠し、さらにミューテーションはアクションによってトリガされます。
+``` js
+// 最も単純なアクション
+function increment (store) {
+  store.dispatch('INCREMENT')
+}
 
-> Vuex のアクションは純粋な Flux の定義では実際には "アクションクリエータ (action creators)" ですが、私はその用語は便利よりも混乱していると見ています。
+// 追加の引数を持つアクション
+// ES2015 の引数分割束縛（argument destructuring）を使用しています
+function incrementBy ({ dispatch }, amount) {
+  dispatch('INCREMENT', amount)
+}
+```
 
-### 単純なアクション
+これは、なぜ単純に直接ミューテーションをディスパッチしないのかと、一見馬鹿げて見えるかもしれません。**ミューテーションは同期的でなければならない** というのを覚えていますか？　アクションはそうではありません。アクションの中では **非同期** の操作をおこなうことができます。
 
-アクションは単純に単一のミューテーションをトリガするのが一般的です。Vuex はそのようなアクションの定義するために省略記法を提供します:
+``` js
+function incrementAsync ({ dispatch }) {
+  setTimeout(() => {
+    dispatch('INCREMENT')
+  }, 1000)
+}
+```
+
+より実践的な例として、ショッピングカートをチェックアウトするアクションを挙げます。このアクションは **非同期な API の呼び出し** と、**複数のミューテーションのディスパッチ** をします。
 
 ``` js
-const store = new Vuex.Store({
-  state: {
-    count: 1
-  },
-  mutations: {
-    INCREMENT (state, x) {
-      state.count += x
+function checkout ({ dispatch, state }, products) {
+  // 現在のカート内の商品を保存します
+  const savedCartItems = [...state.cart.added]
+  // チェックアウトのリクエストを送信し、
+  // 楽観的にカート内をクリアします
+  dispatch(types.CHECKOUT_REQUEST)
+  // shop API は成功時のコールバックと失敗時のコールバックを受け取ります
+  shop.buyProducts(
+    products,
+    // 成功処理
+    () => dispatch(types.CHECKOUT_SUCCESS),
+    // 失敗処理
+    () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
+  )
+}
+```
+
+非同期 API 呼び出しの結果は、アクションの返り値やコールバックから受け取るのではなく、同様にミューテーションをディスパッチすることで扱っていることに注意してください。これは **アクションの呼び出しによって生み出される唯一の副作用はミューテーションのディスパッチであるべき** だという経験則です。
+
+### コンポーネント内でのアクション呼び出し
+
+アクション関数はストアのインスタンスへの参照無しに直接呼び出すことができないということに気づいているかもしれません。技術的に、メソッド内で `action(this.$store)` とアクションを呼び出すことはできます。しかし、ストアを "束縛した" 版のアクションをコンポーネントのメソッドとして呼び出すことができればより良いですし、テンプレートの中から簡単に参照することができるようになります。これは `vuex.actions` オプションを使うことで実現できます。
+
+``` js
+// コンポーネント内
+import { incrementBy } from './actions'
+
+const vm = new Vue({
+  vuex: {
+    getters: { ... }, // ステートのゲッター
+    actions: {
+      incrementBy // ES6 オブジェクトリテラル省略記法（object literal shorthand）、同じ名前で束縛します
     }
-  },
-  actions: {
-    // 省略記法
-    // ミューテーション名を提供する
-    increment: 'INCREMENT'
   }
 })
 ```
 
-今、アクションを呼び出すとき:
+上記のコードは元の `incrementBy` アクションをコンポーネントのストアインスタンスへと束縛し、それをコンポーネントのインスタンスメソッド `vm.incrementBy` として追加しています。`vm.incrementBy` に与えられた任意の引数は、第1引数にストアが渡されている状態で元のアクション関数へと渡されます。つまり以下のように呼ばれます。
 
 ``` js
-store.actions.increment(1)
+vm.incrementBy(1)
 ```
 
-単純に私たちに対して以下を呼び出します:
+これは以下と同様です。
 
 ``` js
-store.dispatch('INCREMENT', 1)
+incrementBy(vm.$store, 1)
 ```
 
-アクションに渡される任意の引数は、ミューテーションハンドラに渡されることに注意してください。
+このようにする利点はコンポーネントのテンプレートの中でより簡単にそれを束縛することができるという点です。
 
-### 標準なアクション
+``` html
+<button v-on:click="incrementBy(1)">1増加する</button>
+```
 
-現在のステートに依存しているロジック、または非同期な操作を必要とするアクションについては、それらを関数として定義します。アクション関数は常に第1引数として呼び出す store を取得します:
+アクションを束縛するときに、明示的に異なるメソッド名を使うこともできます。
 
 ``` js
-const vuex = new Vuex({
-  state: {
-    count: 1
-  },
-  mutations: {
-    INCREMENT (state, x) {
-      state += x
-    }
-  },
-  actions: {
-    incrementIfOdd: (store, x) => {
-      if ((store.state.count + 1) % 2 === 0) {
-        store.dispatch('INCREMENT', x)
-      }
+// コンポーネント内
+import { incrementBy } from './actions'
+
+const vm = new Vue({
+  vuex: {
+    getters: { ... },
+    actions: {
+      plus: incrementBy // 異なる名前で束縛します
     }
   }
 })
 ```
 
+このようにすることで、アクションは `vm.incrementBy` ではなく、 `vm.plus` と束縛されるでしょう。
+
+### インラインアクション
 
-関数本体それほど冗長にしない ES6 の argument destructuring を使用するのが一般的です(ここでは、`dispatch` 関数は store インスタンスに事前にバインドされているように、それをメソッドとして呼び出す必要はありません):
+もしアクションがコンポーネント特有のものであれば、それを単純にインラインで定義することもできます。
 
 ``` js
-// ...
-actions: {
-  incrementIfOdd: ({ dispatch, state }, x) => {
-    if ((state.count + 1) % 2 === 0) {
-      dispatch('INCREMENT', x)
+const vm = new Vue({
+  vuex: {
+    getters: { ... },
+    actions: {
+      plus: ({ dispatch }) => dispatch('INCREMENT')
     }
   }
-}
+})
 ```
 
-以下のように、文字列省略記法は基本的に糖衣構文 (syntax sugar) です:
+### すべてのアクションの束縛
+
+もし、単純にすべての共通のアクションを束縛したいのであれば、以下のように書くことができます。
 
 ``` js
-actions: {
-  increment: 'INCREMENT'
-}
-// 以下に相当 ... :
-actions: {
-  increment: ({ dispatch }, ...payload) => {
-    dispatch('INCREMENT', ...payload)
+import * as actions from './actions'
+
+const vm = new Vue({
+  vuex: {
+    getters: { ... },
+    actions // すべてのアクションを束縛
   }
-}
+})
 ```
 
-### 非同期なアクション
+### モジュール内でアクションをアレンジする
 
-非同期なアクションの定義に対して同じ構文を使用することができます:
+大抵の大きなアプリケーションでは、アクションは様々な目的にあわせてグループやモジュール内でアレンジされるべきでしょう。例えば、userActions モジュールはユーザーの登録、ログイン、ログアウトなどの処理を行い、その一方で、shoppingCartActions モジュールは買い物のためのその他のタスクを処理します。
 
-``` js
-// ...
-actions: {
-  incrementAsync: ({ dispatch }, x) => {
-    setTimeout(() => {
-      dispatch('INCREMENT', x)
-    }, 1000)
+モジュール化をすることで、様々なコンポーネントで必要とされている最小限のアクションのインポートがよりしやすくなります。
+
+再利用のためにあるアクションモジュールを別のアクションモジュールにインポートする場合もあるかもしれません。
+
+```javascript
+// errorActions.js
+export const setError = ({dispatch}, error) => {
+  dispatch('SET_ERROR', error)
+}
+export const showError = ({dispatch}) => {
+  dispatch('SET_ERROR_VISIBLE', true)
+}
+export const hideError = ({dispatch}) => {
+  dispatch('SET_ERROR_VISIBLE', false)
+}
+```
+
+```javascript
+// userActions.js
+import {setError, showError} from './errorActions'
+
+export const login = ({dispatch}, username, password) => {
+  if (username && password) {
+    doLogin(username, password).done(res => {
+      dispatch('SET_USERNAME', res.username)
+      dispatch('SET_LOGGED_IN', true)
+      dispatch('SET_USER_INFO', res)
+    }).fail(error => {
+      dispatch('SET_INVALID_LOGIN')
+      setError({dispatch}, error)
+      showError({dispatch})
+    })
   }
 }
+
 ```
 
-より実践的な例はショッピングカートをチェックアウトする場合です。複数のミューテーションをトリガする必要がある場合があります。チェックアウトを開始されたとき、成功、そして失敗の例を示します:
+アクションを別のモジュールから呼び出す時や、同一モジュール内の別のアクションを呼び出す時は、アクションが第1引数にストアのインスタンスをとることを覚えておきましょう。すなわち、アクション内で呼び出されるアクションには、呼び出し元が受け取った第1引数をそのまま渡すべきです。
 
-``` js
-// ...
-actions: {
-  checkout: ({ dispatch, state }, products) => {
-    // カートアイテムで現在のアイテムを保存する
-    const savedCartItems = [...state.cart.added]
-    // チェックアウトリクエストを送り出し、
-    // 楽観的にカートをクリアします
-    dispatch(types.CHECKOUT_REQUEST)
-    // shop API は成功コールバックと失敗コールバックを受け入れます
-    shop.buyProducts(
-      products,
-      // 成功処理
-      () => dispatch(types.CHECKOUT_SUCCESS),
-      // 失敗処理
-      () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
-    )
-  }
+もしアクションを ES6 の分割束縛（destructuring）スタイルで書いているのであれば、呼び出し元のアクションの第1引数は、両方のアクションが必要とするすべてのプロパティ、および、メソッドをカバーする必要があります。例えば、呼び出し元のアクションが *dispatch* のみを使用し、呼び出し先のアクションが *state* と *watch* を使用している時、呼び出し元の第1引数には、以下のように *dispatch*, *state*, *watch* のすべてを渡すべきです。
+
+```javascript
+import {callee} from './anotherActionModule'
+
+export const caller = ({dispatch, state, watch}) => {
+  dispatch('MUTATION_1')
+  callee({state, watch})
 }
 ```
 
-また、全てのコンポーネントは全体のチェックアウトを行うために `store.actions.checkout(products)` を呼び出す必要があります。
+そうでなければ、旧式の関数の書き方をするべきです。
+
+```javascript
+import {callee} from './anotherActionModule'
+
+export const caller = (store) => {
+  store.dispatch('MUTATION_1')
+  callee(store)
+}
+```

docs/ja/api.md

@@ -11,60 +11,53 @@ const store = new Vuex.Store({ ...options })
 ### Vuex.Store コンストラクタオプション
 
 - **state**
-  
+
   - 型: `Object`
 
-    Vuex store 向けの root なステートオブジェクト
+    Vuex store のための ルートステートオブジェクトです。
 
     [詳細](state.md)
 
 - **mutations**
 
-  - 型: `Object | Array<Object>`
-
-    各エントリキーがミューテーション名とその値がミューテーションハンドラ関数である値であるオブジェクト。ハンドラ関数は常に第1引数として`state` を受信し、そして次のディスパッチ呼び出しに渡される全ての引数を受信する
+  - 型: `Object`
 
-    オブジェクトの配列を渡す場合は、これらオブジェクトは自動的に最後のオブジェクトにいっしょにマージされる
+    各エントリのキーがミューテーション名、値がミューテーションハンドラ関数のオブジェクトです。ハンドラ関数は常に第1引数として`state` を受け取り、以降はディスパッチ呼び出しで渡された全ての引数を受け取ります。
 
     [詳細](mutations.md)
 
-- **actions**
-
-  - 型: `Object | Array<Object>`
-
-    各エントリキーがアクション名とその値のいずれかであるオブジェクト
-
-    1. ミューテーション名の文字列。または、
-    2. 第1引数として store を受信する関数、第2引数以降は追加されたペイロード引数
-
-    Vuex はこれらエントリを処理し、そして実際に呼び出し可能なアクション関数を作成し、さらに store の `actions` プロパティを公開する
+- **modules**
 
-    オブジェクトの配列を渡す場合は、これらオブジェクトは自動的に最後のオブジェクトにいっしょにマージされる
-
-    [詳細](actions.md)
-
-- **middlewares**
-
-  - 型: `Array<Object>`
+  - 型: `Object`
 
-    ミドルウェアオブジェクトの配列で以下のような形式であること:
+    サブモジュールを含む次のような形式のオブジェクトはストアにマージされます。
 
     ``` js
     {
-      snapshot: Boolean, // default: false
-      onInit: Function,
-      onMutation: Function
+      key: {
+        state,
+        mutations
+      },
+      ...
     }
     ```
 
-    全てのフィールドは任意 [詳細](middlewares.md)
+    各モジュールは、ルートオプションに似た `state` と `mutations` を含むことができます。モジュールの状態は、モジュールのキーを使って、ストアのルートステートにアタッチされます。モジュールのミューテーションは、第一引数としてルートステートの代わりに、モジュール自身のステートだけを受け取ります。
+
+- **plugins**
+
+  - 型: `Array<Function>`
+
+    プラグイン関数の配列は、ストアに適用されます。このプラグインは、ストアだけを引数として受け取り、外部への永続化、ロギング、デバッギングのために、ミューテーションを監視するか、または、 websocket や observable のような内部のデータのためにミューテーションをディスパッチします。
+
+    [詳細](plugins.md)
 
 - **strict**
 
   - 型: `Boolean`
-  - デフォルト値: `false`
+  - デフォルト: `false`
 
-    Vuex store を 厳格モードに強制する。厳格モードではミューテーションハンドラの外側の Vuex ステートに任意に変異するとき、エラーを投げる
+    Vuex ストアを厳格モードにします。厳格モードでは、ミューテーションハンドラ以外で、 Vuex の状態の変更を行うと、エラーが投げられます。
 
     [詳細](strict.md)
 
@@ -72,22 +65,50 @@ const store = new Vuex.Store({ ...options })
 
 - **state**
 
-  - 型: `Object`
+  - type: `Object`
 
-    root なステート。読み取り専用
+    ルートステート、読み取り専用です。
 
-- **actions**
+### Vuex.Store インスタンスメソッド
 
-  - 型: `Object`
+- **dispatch(mutationName: String, ...args) | dispatch(mutation: Object)**
 
-    呼び出し可能なアクション関数
+  ミューテーションを直接ディスパッチします。これは、アプリケーションコードで一般的にアクションを使ったほうがよい特定の状況で有用です。
 
-### Vuex.Store インスタンスメソッド
+  *オブジェクトスタイルディスパッチ*
+
+  > requires >=0.6.2
+
+  他にオブジェクトを使って、ミューテーションをディスパッチできます。
 
-- **dispatch(mutationName: String, ...args)**
+  ``` js
+  store.dispatch({
+    type: 'INCREMENT',
+    payload: 10
+  })
+  ```
 
-  直接ミューテーションをディスパッチする。これは一般的には、アプリケーションコードでアクションを使用するほうが必要な場合のような、特定の状況で有用
+- **replaceState(state: Object)**
+
+  ストアのルートステートを置き換えます。これは、ステートの再格納やタイムトラベルのためだけに利用すべきです。
+
+- **watch(getter: Function, cb: Function, [options: Object])**
+
+  リアクティブにゲッター関数の返す値を監視します。値が変わった場合は、コールバックを呼びます。ゲッターはストアの状態のみを引数として受け取ります。 Vue の`vm.$watch`メソッドと同じオプションをオプションのオブジェクトとして受け付けます。
+
+  監視を止める場合は、ハンドラ関数の返り値を関数として呼び出します。
 
 - **hotUpdate(newOptions: Object)**
 
-  ホットスワップな新しいアクションとミューテーション [詳細](hot-reload.md)
+  新しいアクションとミューテーションでホットスワップします。[詳細](hot-reload.md)
+
+- **subscribe(handler: Function)**
+
+  ストアへのミューテーションを購読します。`handler` は、全てのミューテーションの後に呼ばれ、引数として、ミューテーション ディスクリプタとミューテーション後の状態を受け取ります。
+
+  ``` js
+  store.subscribe((mutation, state) => {
+    console.log(mutation.type)
+    console.log(mutation.payload)
+  })
+  ```

docs/ja/concepts.md

@@ -1,31 +0,0 @@
-# 中核概念
-
-Vuex Store を作成するために `Vuex.Store` コンストラクタを使用できます。ほとんどの場合、各アプリケーション毎に単独の store だけが必要になります。各 Vuex Store は 3 種類の "構成要素" からなります:
-
-- **ステート**: アプリケーション状態を表すプレーンなオブジェクト
-
-- **ミューテーション**: 状態を変異させる関数。ミューテーションは**同期**必須
-
-- **アクション**: ミューテーションをディスパッチする関数。アクションは非同期操作を含めることができ、複数のミューテーションをディスパッチすることができます
-
-どうして、状態を操作する単純な機能よりもむしろ、*ミューテーション*と*アクション*を区別したいのでしょうか？その理由は、**ミューテーションを分離したいのと非同期**のためです。多くの複雑なアプリケーションは 2 つの組合せから成り立ちます。分離すると、それら両方を調査することが容易になり、そしてそれらのためのテストを書くこともできます。
-
-> Flux について精通している場合、ここでの用語/概念の違いがあることに注意してください。Vuex のアクションは Flux の**アクションクリエータ (action creators)** と同等でありますが、Vuex のミューテーションは Flux の **アクション (actions)** に相当します。
-
-### Vuex Store の作成
-
-> **NOTE:** 残りのドキュメント向けのコード例に対して ES2015 シンタックスを使用します。それについて理解できない場合は、[ここで](https://babeljs.io/docs/learn-es2015/)で学習してください！ドキュメントは既に[大規模アプリケーションの構築](http://vuejs.org/guide/application.html)で説明した概念にに精通している前提としています。
-
-Vuex Store を作成することは非常に簡単です。上記の構成要素を一緒に入れると下記になります:
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({
-  state: { ... },
-  actions: { ... },
-  mutations: { ... }
-})
-```
-
-一度作成すると、ステートは `store.state` 経由、アクションは `store.actions` 経由でアクセスすることができます。ミューテーション関数は直接アクセスすることはできません。ミューテーション関数は、アクションによるトリガされた時だけ、もしくは `store.dispatch()` を呼び出すときにアクセスできます。次の詳細で各概念について説明します。

docs/ja/data-flow.md

@@ -1,8 +1,8 @@
 # データフロー
 
-Vuex アプリケーション内部のデータフローをより理解を得るために、Vuex で単純にカウンタするアプリケーションを構築してみましょう。これは概念を説明する目的のための簡単な例であることに注意してください。実際には、このような単純なタスクのために Vuex は必要ありません。
+Vuex アプリケーションの内部のデータフローをよりよく理解するために、単純なカウンターアプリケーションを Vuex で作ってみましょう。これは単にコンセプトを説明するための素朴な例であるということに注意してください。実際はこのような単純なタスクに Vuex を使う必要はありません。
 
-### セットアップ
+### ストア
 
 ``` js
 // store.js
@@ -10,19 +10,13 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
-```
-
-### アプリケーションのステートを定義
 
-``` js
+// アプリケーションの初期状態
 const state = {
   count: 0
 }
-```
-
-### ステート可能なミューテーションを定義
 
-``` js
+// 発生しうるミューテーションを定義
 const mutations = {
   INCREMENT (state) {
     state.count++
@@ -31,34 +25,29 @@ const mutations = {
     state.count--
   }
 }
-```
-
-### 呼び出し可能なアクションを定義
 
-``` js
-const actions = {
-  increment: 'INCREMENT',
-  decrement: 'DECREMENT'
-}
+// ストアを作成
+export default new Vuex.Store({
+  state,
+  mutations
+})
 ```
 
-### Vuex Store を作成
+### アクション
 
 ``` js
-export default new Vuex.Store({
-  state,
-  mutations,
-  actions
-})
+// actions.js
+export const increment = ({ dispatch }) => dispatch('INCREMENT')
+export const decrement = ({ dispatch }) => dispatch('DECREMENT')
 ```
 
-### Vue コンポーネントでの使用
+### Vue とともに使う
 
 **テンプレート**
 
 ``` html
-<div>
-  Clicked: {{ count }} times
+<div id="app">
+  クリック回数: {{ count }}
   <button v-on:click="increment">+</button>
   <button v-on:click="decrement">-</button>
 </div>
@@ -67,25 +56,33 @@ export default new Vuex.Store({
 **スクリプト**
 
 ``` js
-import store from './store.js'
-
-export default {
-  computed: {
-    // 算出プロパティ(computed property) を使用してステートにバインド
-    count () {
-      return store.state.count
+// これがルートの Vue インスタンスなので、ストアをインポートし、挿入しています
+// 大きなアプリケーションであれば、これは一度だけ行います
+import store from './store'
+import { increment, decrement } from './actions'
+
+const app = new Vue({
+  el: '#app',
+  store,
+  vuex: {
+    getters: {
+      count: state => state.count
+    },
+    actions: {
+      increment,
+      decrement
     }
-  },
-  methods: {
-    increment: store.actions.increment,
-    decrement: store.actions.decrement
   }
-}
+})
 ```
 
-ここでは、コンポーネントが非常に単純であることに注意しましょう。それは単に Vuex store からいくつかのステートを表示し(データそれ自身でさえ所有しません)、そしてユーザー入力イベントでいくつかの store のアクションを呼び出します。
+ここで、あなたはコンポーネントそれ自身はとても単純であることに気がつくでしょう。コンポーネントはただ Vuex ストアからのステートを表示し（コンポーネントは自身のデータを持っていません）、そして、ユーザーからの入力イベントに応じてストアのアクションを呼び出すだけになっています。
+
+そしてまた、 Flux のようにデータフローが一方向であることにも気がつくでしょう。
 
-Flux であるような、データの流れが一方向であることに注意しましょう:
+1. コンポーネント内でのユーザーの入力はアクションの呼び出しをトリガし、
+2. アクションはステートを更新するためにミューテーションをディスパッチし、
+3. ストア内部でのステートの更新はゲッターを通してコンポーネントへ反映されます。
 
 <p align="center">
   <img width="700px" src="vuex.png">

docs/ja/forms.md

@@ -1,28 +1,33 @@
 # フォームのハンドリング
 
-厳格モードで Vuex を使用するとき、Vuex に属するステートの一部において `v-model` を使用するためには少しトリッキーです:
+厳格モードで Vuex を使用するとき、Vuex に属するステートの一部において `v-model` を使用するのは少しトリッキーです:
 
 ``` html
 <input v-model="obj.message">
 ```
 
-`obj` が store からオブジェクトを返す算出プロパティ (computed property) と仮定すると、`v-model` はここでは、input でユーザーがタイプするとき、直接 `obj.message` を変異させようとします。厳格モードにおいて、ミューテーションは明示的に Vuex のミューテーションハンドラ内部で処理されていないため、エラーを投げます。
+`obj` がストアからオブジェクトを返す算出プロパティ (computed property) と仮定すると、`v-model` はここでは、input でユーザーがタイプするとき、直接 `obj.message` を変更させようとします。厳格モードにおいて、この変更は明示的に Vuex のミューテーションハンドラ内部で処理されていないため、エラーを投げます。
 
 それに対処するための "Vuex way" は、`<input>` の値をバインディングし、そして `input` または `change` イベントでアクションを呼び出します:
 
 ``` html
-<input :value="obj.message" @input="updateMessage">
+<input :value="message" @input="updateMessage">
 ```
 ``` js
 // ...
-methods: {
-  updateMessage: function (e) {
-    store.actions.updateMessage(e.target.value)
+vuex: {
+  getters: {
+    message: state => state.obj.message
+  },
+  actions: {
+    updateMessage: ({ dispatch }, e) => {
+      dispatch('UPDATE_MESSAGE', e.target.value)
+    }
   }
 }
 ```
 
-`updateMessage` アクションが単に `'UPDATE_MESSAGE'` をディスパッチすると仮定すると、ここではミューテーションハンドラは以下のようになります:
+ミューテーションのハンドラは以下のようになります:
 
 ``` js
 // ...
@@ -33,4 +38,35 @@ mutations: {
 }
 ```
 
-確かに、これはかなりシンプルな `v-model` よりも冗長ですが、これは、明示的で追跡可能なステートの変化させるためのコストです。同時に、Vuex は Vuex store 内部の全てのステートを置く必要がないということに注意してください。フォームのインタラクションの全てにおいて、ミューテーションの追跡を望まない場合は、単純にコンポーネントのローカルステートとして Vuex の外部にフォームのステートを保つことができ、これは自由に `v-model` を活用することができます。
+確かに、これは単純な `v-model` よりもかなり冗長ですが、これは、ステートの変化を明示的で追跡可能にするためのコストです。同時に、 Vuex ストア内部に全てのステートを置く必要はないということに注意してください。フォームのインタラクションの全てにおいて、ミューテーションの追跡を望まない場合は、単純にコンポーネントのローカルステートとして Vuex の外部にフォームのステートを保つことができ、これは自由に `v-model` を活用することができます。
+
+`v-model` を Vuex ストア内のステートに対して活用するための代わりのアプローチとして、コンポーネントの算出プロパティのセッターを使う方法があります。このアプローチでは lazy、number、debounce といったすべてのパラメータ属性の利点を享受することができます。
+
+``` html
+<input v-model="thisMessage">
+```
+``` js
+// ...
+vuex: {
+  getters: {
+    message: state => state.obj.message
+  },
+  actions: {
+    updateMessage: ({ dispatch }, value) => {
+      dispatch('UPDATE_MESSAGE', value)
+    }
+  }
+},
+computed: {
+  thisMessage: {
+    get () {
+      return this.message
+    },
+    set (val) {
+      this.updateMessage(val)
+    }
+  }
+}
+```
+
+ミューテーションには変更はありません。

docs/ja/getting-started.md

@@ -0,0 +1,53 @@
+# Vuex 入門
+
+Vuex アプリケーションの中心にあるものは **ストア** です。"ストア"は、基本的にアプリケーションの**状態**を保持するコンテナです。単純なグローバルオブジェクトとの違いが2つあります。
+
+1. Vuex ストアはリアクティブです。 Vue コンポーネントがストアから状態を取り出すとき、もし、ストアの状態が変化したら、ストアは、リアクティブかつ効率的に更新を行います。
+
+2. ストアの状態を直接変更することはできません。明示的な **ミューテーション**のディスパッチによってのみ、ストアの状態を変更します。これによって、全ての状態の変更の追跡を容易にし、ツールでのアプリケーションの動作の理解を助けます。
+
+### シンプルなストア
+
+> **注意:** 私たちは、このドキュメントのコード例に ES2015 のシンタックスを利用しています。 もし、触れたことがなければ、[ぜひ、触れてください](https://babeljs.io/docs/learn-es2015/)! このドキュメントは、他に[大規模アプリケーションの構築](https://jp.vuejs.org/guide/application.html)に書かれたコンセプトを既に読まれていることを前提にしています。
+
+Vuex ストアの作成は、かなり単純です。ストアオブジェクトの初期状態と、いくつかのミューテーションを準備するだけです。
+
+``` js
+import Vuex from 'vuex'
+
+const state = {
+  count: 0
+}
+
+const mutations = {
+  INCREMENT (state) {
+    state.count++
+  }
+}
+
+export default new Vuex.Store({
+  state,
+  mutations
+})
+```
+
+`store.state` でストアオブジェクトの状態を参照でき、また、ミューションの名前でディスパッチすることで、ミューテーションをトリガーできます。
+
+``` js
+store.dispatch('INCREMENT')
+
+console.log(store.state.count) // -> 1
+```
+
+もし、オブジェクトスタイルのディスパッチがよければ、以下のように記述して、おこなうことができます。
+
+``` js
+// 先の例と同じ効果
+store.dispatch({
+  type: 'INCREMENT'
+})
+```
+
+もう一度、`store.state.count` を直接変更する代わりにミューテーションをディスパッチする理由について、確認しておきましょう。このシンプルな規約は、あなたのコードの意図をさらに明確にし、コードを読んだ時にアプリケーションの状態の変更について、論理的に考えることができるようにします。加えて、私たちに全ての変更のログを取ったり、状態のスナップショットを取ったり、タイムトラベルデバッグを行うようなツールを実装する余地を与えてくれます。
+
+今回は最も単純な例を通して、ストアが何かについて説明してきました。しかし、 Vuex はストアだけではありません。次から、[ステート](state.md)、[ミューテーション](mutations.md)、[アクション](actions.md)といった Vuex のコアコンセプトについて詳しく説明していきます。

docs/ja/hot-reload.md

@@ -1,29 +1,44 @@
 # ホットリローディング
 
-Vuex は開発においてホットリローディングなアクションとミューテーションをサポートします。Webpack は [Hot Module Replacement API](https://webpack.github.io/docs/hot-module-replacement.html) を使用します。Browserify においても [browserify-hmr](https://github.com/AgentME/browserify-hmr/) プラグインによって使用することができます。
+Vuex はアプリケーションの開発を行っている間のミューテーション、モジュール、アクション、ゲッターのホットリローディングをサポートします。Webpack は [Hot Module Replacement API](https://webpack.github.io/docs/hot-module-replacement.html) を使用します。Browserify においても [browserify-hmr](https://github.com/AgentME/browserify-hmr/) プラグインを使用することができます。
 
-新しいアクションとミューテーションによって `store.hotUpdate()` として呼び出すのと同じくらい簡単です:
+ミューテーションとモジュールに対して、API `store.hotUpdate()` メソッドを利用する必要があります:
 
 ``` 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,
-  actions,
-  mutations
+  mutations,
+  modules: {
+    a: moduleA
+  }
 })
 
 if (module.hot) {
-  // ホットモジュールとしてアクションとモジュールを受け付ける
-  module.hot.accept(['./actions', './mutations'], () => {
+  // ホットモジュールとしてアクションとモジュールを受け付けます
+  module.hot.accept(['./mutations', './modules/a'], () => {
     // 更新されたモジュールをインポートする
-    // babel 6 モジュール出力のため、ここでは .default を追加しなければならない
+    // babel 6 のモジュール出力のため、ここでは .default を追加しなければならない
     const newActions = require('./actions').default
     const newMutations = require('./mutations').default
     // 新しいアクションとミューテーションにスワップ
     store.hotUpdate({
-      actions: newActions,
-      mutations: newMutations
+      mutations: newMutations,
+      modules: {
+        a: newModuleA
+      }
     })
   })
 }
 ```
+
+アクションとゲッターに何か特別なことをする必要はありません。 Webpack のホットモジュールリプレースメントシステムは依存関係の変化を "伝播" します。そして、アクションとゲッターの変更は、 Vue コンポーネントに伝播され、それらをインポートします。 `vue-loader` によってロードされた Vue コンポーネントは、自ずとホットリロード可能になるので、それらの影響を受けたコンポーネントは自身をホットリロードし、更新されたアクションとゲッターを利用します。

docs/ja/intro.md

@@ -1,13 +1,13 @@
-## Vuex は何ですか？
+## Vuex とは何か
 
-Vuex は Vue.js アプリケーションで集中状態管理するためのアプリケーションアーキテクチャです。[Flux](https://facebook.github.io/flux/) や [Redux](https://github.com/rackt/redux) からインスピレーションを得ていますが、 簡易化された概念、そして Vue.js リアクティブシステムの長所を得るために、特別に設計された実装になっています。
+Vuex は Vue.js アプリケーションで状態を一元的に管理するためのアプリケーションアーキテクチャです。[Flux](https://facebook.github.io/flux/) や [Redux](https://github.com/rackt/redux) にインスパイアされていますが、それよりも単純化された概念を持ち、 Vue.js のリアクティブシステムの長所を生かすために、特別に設計された実装になっています。
 
 ## なぜこれを必要とするのですか？
 
-あなたのアプリケーションが非常に単純であるならば、多分 Vuex は必要ないでしょう。それを早まって適用しないでください。しかし、中〜大規模な SPA を構築する場合は、あなたの Vue コンポーネントの外側でどうやってよりよい構造物にするかについて考える状況に遭遇する機会です。これは Vuex の出番です。
+あなたのアプリケーションが十分に単純であるなら、おそらく Vuex は必要ないでしょう。早まって Vuex を適用しないようにしてください。しかし、中〜大規模な SPA を構築することになったら、Vue コンポーネントの外側の構造をより良くする方法を考える適切なタイミングです。そこで Vuex の出番です。
 
-Vue.js を単独て使用するとき、しばしば、私達のコンポーネントの"内部"状態を保持します。つまり、各コンポーネントは、私達のアプリケーション状態の一部を所有しており、結果として状態があらゆる場所に散在しています。しかしながら、時どき状態の一部は、複数のコンポーネントにより共有される必要があります。一般的に見られる経験として、あるコンポーネントがいくつかの状態を他のコンポーネントにカスタムイベントシステムを使用して"送ろう"とします。このパターンの問題は、大規模なコンポーネントツリー内部のイベントフローはすぐに複雑にでき、しばしばうまく動作しない場合はそれについて原因を調査するのは難しいです。
+Vue.js を単体で使用するとき、私達はコンポーネントの"内部"に状態を格納しようとする傾向があります。つまり、各コンポーネントは、アプリケーションの状態の一部を所有しており、結果として状態が様々な場所に散らばっています。しかし、時には一部の状態を、複数のコンポーネントの間で共有したいこともあるでしょう。このようなケースで、カスタムイベントシステムを利用して、あるコンポーネントがいくつかの状態を他のコンポーネントに"送信"する例がよく見られます。このパターンは、大規模なコンポーネントツリーでは、内部のイベントフローが瞬く間に複雑になり、正しく動作しない場合に原因を調査するのが困難になるという問題があります。
 
-大規模アプリケーションで状態を共有させるために優れた対処として、**コンポーネントのローカル状態**と**アプリケーションレベルの状態**を区別する必要があります。アプリケーション状態は特定のコンポーネントに属していませんが、私達のコンポーネントはリアクティブな DOM 更新のためにそれを監視できます。1 つの場所でそれを集中的に管理することによって、あるコンポーネントがそこに属する必要よりも全てに影響を与えるため、もはやイベントあちこちを渡す必要はありません。加えて、私達は、記録と状態変化の理解を容易にするための全ての変異を検査することができ、タイムトラベルデバッグのような派手なものも実装可能です。
+大規模アプリケーションで状態の共有をより良く対処するために、**コンポーネント内部の状態**と**アプリケーションレベルの状態**を区別する必要があります。アプリケーションレベルの状態は特定のコンポーネントに属していませんが、私達のコンポーネントはリアクティブな DOM 更新のためにまだそれを監視することができます。ひとつの場所で一元的に状態を管理することによって、複数のコンポーネントに影響を与える状態すべてがそこに属している必要があり、もはやイベントをあちこちに渡す必要はありません。加えて、全ての状態の変更の記録と検査がおこなわれることで、状態が変化する過程の理解を容易にし、さらにタイムトラベルデバッグのような興味深い機能も実装できます。
 
-Vuex はまた、どのように異なる場所に状態管理ロジックを分離するか、いくつか意見を強制しますが、それでも実際のコード構造に対して十分な柔軟性を可能します。
+Vuex は状態を管理するロジックの分割について、他にも様々な場所で一定の制約を強いてきますが、それでも実際のコード構造に対して十分な柔軟性を持っています。

docs/ja/middlewares.md

@@ -1,81 +0,0 @@
-# ミドルウェア
-
-Vuex store は各ミューテーション(これは Redux のミドルウェアとは全く無関係であることに注意してください)に対して公開された hook を `middlewares` オプションとして受け入れます。Vuex のミドルウェアは単純にいくつかの hook 関数を実装したオブジェクトです:
-
-``` js
-const myMiddleware = {
-  onInit (state) {
-    // 初期ステートを記録
-  },
-  onMutation (mutation, state) {
-    // 全ての変異後に呼ばれる
-    // ミューテーションは { type, payload } の形式で来る
-  }
-}
-```
-
-そして、このように使用することができます:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: [myMiddleware]
-})
-```
-
-デフォルトでは、ミドルウェアは実際 `state` オブジェクトを受信します。ミドルウェアは主にデバッギング目的やデータの永続化のために使用されるため、ミドルウェアでは、**ステートを変異することができません**。
-
-時どき、ミドルウェアはステートの"スナップショット"を受信することができ、また事前のミューテーションの状態と事後のミューテーションの状態を比較したいかもしれません。このようなミドルウェアは `snapshot: true` オプションを宣言しなければなりません:
-
-``` js
-const myMiddlewareWithSnapshot = {
-  snapshot: true,
-  onMutation (mutation, nextState, prevState) {
-    // prevState と nextState は完全コピーされた(deep-cloned)、
-    // 前のミューテーションの後のミューテーションのスナップショット
-  }
-}
-```
-
-**ステートのスナップショットを撮るミドルウェアは開発時のみに使用すべきです。** Webpack または Browserify を使用するとき、私たちのためにビルドツールがそれを処理することができます:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: process.env.NODE_ENV !== 'production'
-    ? [myMiddlewareWithSnapshot]
-    : []
-})
-```
-
-ミドルウェアはデフォルトで使用されるでしょう。本番環境のため、`process.env.NODE_ENV !== 'production'` の値を `false` に変換するために、[ここ](http://vuejs.org/guide/application.html#Deploying_for_Production) で説明したビルドセットアップを最終ビルド向けに使用します。
-
-### ビルドイン Logger ミドルウェア
-
-Vuex は一般的なデバッギングを使用するための logger ミドルウェアが付属しています:
-
-``` js
-const store = new Vuex.Store({
-  middlewares: [Vuex.createLogger()]
-})
-```
-
-`createLogger` 関数はいくつかのオプションがあります:
-
-``` js
-const logger = Vuex.createLogger({
-  collapsed: false, // ログに記録されたミューテーションを自動拡大する
-  transformer (state) {
-    // それを記録す前にステートを変換する
-    // 例えば、特定のサブツリーだけ返します
-    return state.subTree
-  },
-  mutationTransformer (mutation) {
-    // ミューテーションは { type, payload } の形式で記録される
-    // どんな形式でも欲しいフォーマットに変換できる
-    return mutation.type
-  }
-})
-```
-
-ステートのスナップショットを撮る logger ミドルウェアは開発時のみ使用することに注意してください。

docs/ja/mutations.md

@@ -1,6 +1,6 @@
 # ミューテーション
 
-Vuex のミューテーションは基本的にイベントです。各ミューテーションは**名前**と**ハンドラ**を持ちます。ハンドラ関数は常に全体のステートツリーを第1引数として取得します:
+Vuex のミューテーションは本質的にイベントです。各ミューテーションは**名前**と**ハンドラ**を持ちます。ハンドラ関数は常に Vuex の state を第1引数として取得します:
 
 ``` js
 import Vuex from 'vuex'
@@ -11,16 +11,16 @@ const store = new Vuex.Store({
   },
   mutations: {
     INCREMENT (state) {
-      // 変異するステート
+      // 状態の変更
       state.count++
     }
   }
 })
 ```
 
-ミューテーション名に対して全て大文字を使用するのは、容易にアクションと区別できるようにするための規則です。
+ミューテーションの名前に全て大文字を使用するのは、容易に通常の関数と区別できるようにするための規約です。
 
-直接ミューテーションハンドラ呼び出すことはできません。ここでのオプションは、よりイベント登録のようなものです。"`INCREMENT` イベントがディスパッチされるとき、このハンドラは呼ばれます。"ミューテーションハンドラを起動するためには、ミューテーションイベントをディスパッチする必要があります:
+直接ミューテーションハンドラを呼び出すことはできません。この mutations オプションは、どちらかいうと"`INCREMENT` イベントがディスパッチされるとき、このハンドラが呼ばれる"といったイベント登録のようなものです。ミューテーションハンドラを起動するためには、ミューテーションイベントをディスパッチする必要があります:
 
 ``` js
 store.dispatch('INCREMENT')
@@ -28,7 +28,7 @@ store.dispatch('INCREMENT')
 
 ### 引数によるディスパッチ
 
-引数に沿って渡すことも可能です:
+引数を渡すことも可能です:
 
 ``` js
 // ...
@@ -42,27 +42,75 @@ mutations: {
 store.dispatch('INCREMENT', 10)
 ```
 
-ここの `10` は `state` に続く第2引数としてミューテーションハンドラに渡されます。任意の追加引数と同じです。これら引数は、特定のミューテーションに対して**ペイロード**と呼ばれています。
+ここでの `10` は `state` に続く第2引数としてミューテーションハンドラに渡されます。さらに追加される引数についても同様です。これらの引数は、特定のミューテーションに対する**ペイロード**と呼びます。
 
-### Vue のリアクティブなルールに従うミューテーション
+### オブジェクトスタイルのディスパッチ
 
-Vuex store のステートは Vue によってリアクティブになっているので、ステートを変異するとき、ステートを監視している Vue コンポーネントは自動的に更新されます。これはまた、Vuex のミューテーションは、純粋な Vue で動作しているとき、同じリアクティブな警告の対象となっているのを意味します:
+またオブジェクトを利用してミューテーションをディスパッチすることもできます:
 
-1. 前もって全て望まれるフィールドによって、あなたの store の初期ステートを初期化することを好みます
+```js
+store.dispatch({
+  type: 'INCREMENT',
+  payload: 10
+})
+```
 
-2. 新しいプロパティをオブジェクトに追加するとき、いずれか必要です:
+オブジェクトスタイルを利用するとき、全ての引数をディスパッチされるオブジェクトのプロパティとして含めなければいけないことに注意してください。全体のオブジェクトは、ミューテーションハンドラの第2引数として渡されます。
 
-  - `Vue.set(obj, 'newProp', 123)` を使用または -
+``` js
+mutations: {
+  INCREMENT (state, mutation) {
+    state.count += mutation.payload
+  }
+}
+```
 
-  - 全く新しいものでオブジェクトを置き換える。例えば、stage-2 の [object spread syntax](https://github.com/sebmarkbage/ecmascript-rest-spread) を使用して、このようにそれを書くことができます:
+### サイレントディスパッチ
+
+場合によっては、プラグインに状態の変化を記録して欲しくないこともあるでしょう。あるいは、短い間隔、ポーリングでのストアへの複数のディスパッチも、常に追跡する必要はないでしょう。これらの状況では、ミューテーションを沈黙( silence )させることが適切と考えることができます。
+
+注意: サイレントディスパッチは可能な限り避けるべきです。サイレントミューテーションは、開発ツールの全ての状態の変更を追跡するという規約を壊します。絶対に必要だという状況で控えめに使用してください。
+
+``` js
+/**
+ * 例: プログレス アクション
+ * 追跡する必要がない変更を頻繁に送ります
+ **/
+export function start(store, options = {}) {
+  let timer = setInterval(() => {
+    store.dispatch({
+      type: INCREMENT,
+      silent: true,
+      payload: {
+        amount: 1,
+      },
+    });
+    if (store.state.progress === 100) {
+      clearInterval(timer);
+    }
+  }, 10);
+}
+```
+
+### Vue のリアクティブなルールに則ったミューテーション
+
+Vuex ストアのステートは Vue によってリアクティブになっているので、ステートを変更すると、ステートを監視している Vue コンポーネントは自動的に更新されます。これは、Vuex のミューテーションは、通常の Vue で動作させているときと同じリアクティブな警告の対象となることを意味します:
+
+1. 前もって、全ての必要なフィールドによって、ストアの初期状態を初期化することを好みます
+
+2. 新しいプロパティをオブジェクトに追加するとき、以下のいずれかが必要です:
+
+  - `Vue.set(obj, 'newProp', 123)` を使用する。あるいは
+
+  - 全く新しいオブジェクトで既存のオブジェクトを置き換える。例えば、stage-2 の [object spread syntax](https://github.com/sebmarkbage/ecmascript-rest-spread) を使用して、以下のように書くことができます:
 
   ``` js
   state.obj = { ...state.obj, newProp: 123 }
   ```
 
-### ミューテーション名に対して定数を使用
+### ミューテーション名に定数を使用する
 
-ミューテーション名には定数を使用することが一般的です。コードに対してリンタのようなツールの長所を利用することができ、そして、単一ファイルに全ての定数を設定することは、あなたの協力者にミューテーションがアプリケーション全体で可能であるかが一目見ただけで理解できるビューを得ることができます:
+ミューテーション名には定数を使用することが一般的です。これは、コードに対してリントツールのようなツールを利用できるという利点があり、また、単一ファイルに全ての定数を設定することで、共同で作業する人にアプリケーション全体で何のミューテーションが可能であるか一目見ただけで理解できるようにします:
 
 ``` js
 // mutation-types.js
@@ -86,10 +134,24 @@ const store = new Vuex.Store({
 })
 ```
 
-定数を使用するかどうか大部分が好みであり、それは多くの開発者による大規模アプリケーションで役に立ちますが、好きではないならば、それは完全にオプションです。
+定数を使用するかどうか大抵は好みであり、多くの開発者による大規模アプリケーションで役に立ちますが、もしお気に召さなければ、使用しなくても構いません。これは完全にオプションです。
+
+### ミューテーションは同期的でなければならない
+
+ひとつの重要なルールを覚えておきましょう。それはミューテーションハンドラ関数は同期的でなければならないということです。なぜか？　次の例で考えてみましょう:
+
+```js
+mutations: {
+  SOME_MUTATION (state) {
+    api.callAsyncMethod(() => {
+      state.count++
+    })
+  }
+}
+```
 
-### アクションの上へ
+いま、ミューテーションのログを見て、アプリケーションのデバッグを行っていることを想像してください。全てのミューテーションはログに記録されていて、ミューテーションの前後の状態のスナップショットを比較することが可能です。しかし、例のミューテーション内の非同期コールバックは、それを不可能にします: そのコールバックは、ミューテーションがディスパッチされたときにまだ呼ばれません。そして、コールバックが実際いつ呼ばれるかは分かりません。いかなる状態変更でも、コールバック内で起きる場合は本質的に追跡不可能です。
 
-これまでのところ、`store.dispatch` の手動呼び出しによってミューテーションをトリガしていました。これは実行可能なアプローチですが、実際には私たちのコンポーネントのコードでこれを行うことはほとんどありません。ほとんどの時間、[アクション](actions.md) を呼び出し、非同期データフェッチングのようなより複雑なロジックをカプセル化することができます。
+### アクションに続けて
 
-また、全てのミューテーションハンドラは**同期**でなければならないという、1つ重要なルールを覚えておきましょう。任意の非同期な操作はアクションに属しています。
+状態変更を非同期に組み合わせることは、プログラムの動きを予測することを非常に困難にするかもしれません。例えば、状態を変更する非同期コールバックを持った2つのメソッドを両方呼び出しとき、どうやってそれらが呼び出されたか、あるいは先に呼び出されたかのはどちらかなのか知ればよいのでしょう？　状態変更と非同期の2つの概念を分離したいという理由は、はっきりしています。 Vuex では、全ての状態変更は同期的におこなうという作法になっています。全ての非同期命令は [アクション](actions.md) の内部でおこなうことになるでしょう。

docs/ja/plugins.md

@@ -0,0 +1,117 @@
+# プラグイン
+
+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.dispatch('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
+  })
+}
+```
+
+**状態のスナップショットを撮るプラグインはアプリケーションの開発の間だけ使われるべきです。**  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.github.io/docs/list-of-plugins.html#defineplugin) 、 Browserify では[envify](https://github.com/hughsk/envify) が必要になります。
+
+### ビルトインロガープラグイン
+
+Vuex には、一般的なデバッグに利用する用途の備え付けのロガープラグインがあります。
+
+```js
+import createLogger from 'vuex/logger'
+
+const store = new Vuex.Store({
+  plugins: [createLogger()]
+})
+```
+
+`createLogger` 関数はいくつかのオプションを受け取ります:
+
+``` js
+const logger = createLogger({
+  collapsed: false, // ログ出力されたミューテーションを自動で展開します
+  transformer (state) {
+    // ロギングの前に、状態を変換します
+    // 例えば、特定のサブツリーのみを返します
+    return state.subTree
+  },
+  mutationTransformer (mutation) {
+    // ミューテーションは、{ type, payload } の形式でログ出力されます
+    // 任意の方法でそれをフォーマットできます
+    return mutation.type
+  }
+})
+```
+
+ロガープラグインは、状態のスナップショットを撮ることに注意しましょう。これは、開発を行っている間だけ利用すべきです。

docs/ja/quickstart.md

@@ -1,2 +0,0 @@
-# Quickstart
-

docs/ja/state.md

@@ -1,51 +1,153 @@
-# ステート
+# ステート と ゲッター
 
 ### 単一ステートツリー
 
-Vuex は**単一ステートツリー (single state tree)**を使用します。つまり、この単一なオブジェクトはあなたのアプリケーションレベルの状態が全て含まれており、"信頼できる唯一の情報源 (single source of truth)" として機能します。これは状態の特定の部分を見つけることが容易になり、そしてデバッギング目的のために現在のアプリケーション状態のスナップショットを取ることも容易にできます。
+Vuex は**単一ステートツリー (single state tree)**を使います。つまり、この単一なオブジェクトはアプリケーションレベルの状態が全て含まれており、"信頼できる唯一の情報源 (single source of truth)" として機能します。単一ステートツリーは状態の特定の部分を見つけること、デバッグのために現在のアプリケーションの状態のスナップショットを撮ることを容易にします。
 
-単一ステートツリーはモジュールとコンフリクト(競合)しません。以降の章では、あなたの状態管理ロジックをサブモジュールにおいてどうやって分離するかについて説明します。
+単一ステートツリーはモジュール性とコンフリクト(競合)しません。以降の章で、アプリケーションの状態とミューテーション(変更)をサブモジュールに分割する方法について説明します。
 
-### Vue コンポーネントにおいて Vuex ステートを取得する
-`state` オブジェクトは、Vue インスタンスに渡される `data` オブジェクトに似ており、一度 Vuex store に渡され、[Vue のリアクティブシステム](http://vuejs.org/guide/reactivity.html) によってリアクティブになります。これは、Vue コンポーネントにバインディングする Vuex state は、算出プロパティ (computed property) の中からそれを返すのと同じくらい簡単なことを意味します:
+### Vuex の状態を Vue コンポーネントに入れる
+
+ストアにある状態を Vue コンポーネント に表示するにはどうすればよいのでしょう？　Vuex ストア はリアクティブなので、ストアから状態を"取り出す"一番シンプルな方法は、単純にいくつかのストアの状態を [算出プロパティ](https://jp.vuejs.org/guide/computed.html) で返すことです。
 
 ``` js
-// Vue コンポーネントモジュール内部
+// Vue コンポーネントの定義
+computed: {
+count: function() {
+    return store.state.count
+  }
+}
+```
 
-// vuex store をインポート
-import store from './store'
+`store.state.count` が変わるたび、算出プロパティの再評価が発生し、関連した DOM の更新をトリガーします。
 
-export default {
-  computed: {
-    message () {
-      return store.state.message
+しかし、このパターンでは、コンポーネントがグローバルストアシングルトンに依存してしまいます。これはコンポーネントのテストを行うことや、同じコンポーネントのセットを使って、複数のアプリケーションのインスタンスを実行することを困難にします。規模の大きいアプリケーションでは、ルートコンポーネントから子コンポーネントに"注入"したくなるはずです。どのように行うか以下に示します。
+
+1. Vuex をインストールし、ルートコンポーネントとストアを繋ぎます
+
+  ``` js
+  import Vue from 'vue'
+  import Vuex from 'vuex'
+  import store from './store'
+  import MyComponent from './MyComponent'
+
+  // Vue コンポーネントにどうやって Vuex に関連したオプションを扱えばよいか教えるための重要な記述です
+  Vue.use(Vuex)
+
+  var app = new Vue({
+    el: '#app',
+    // "store" オプションで指定されたストアは、全ての子コンポーネントに注入されます
+    store,
+    components: {
+      MyComponent
+    }
+  })
+  ```
+
+  ルートインスタンスに `store` オプションを渡すことで、渡されたストアをルートの全ての子コンポーネントに注入します。これは `this.$store` で各コンポーネントから参照することができますが、それを参照する必要があるケースはほとんどありません。
+
+2. 子コンポーネントでは、`vue.getters` オプションの**ゲッター**関数で状態を取り出します
+
+  ``` js
+  // MyComponent.js
+  export default {
+    template: '...',
+    data () { ... },
+    // これはストアから状態を取り出す場所です
+    vuex: {
+      getters: {
+        // ステートゲッター関数は、コンポーネントで `store.state.count` を `this.count` として束縛します
+        count: function (state) {
+          return state.count
+        }
+      }
+    }
+  }
+  ```
+
+  特殊な `vuex` オプションブロックについて説明しておきましょう。これは、コンポーネントで利用されるストアの状態が何か記述する場所です。各プロパテイ名は、唯一の引数として、全体のステートツリーを受け取るゲッター関数を指定します。そして、状態の一部を選ぶか、状態から算出される値を返します。返された値は、算出プロパティのように、プロパティ名を使ってコンポーネントにセットされます。
+
+  ほとんどの場合で、"ゲッター( getter )" 関数は、ES2015 のアロー関数を使って、完結に書くことができるでしょう:
+
+  ``` js
+  vuex: {
+    getters: {
+      count: state => state.count
+    }
+  }
+  ```
+
+### ゲッターは純粋でなければならない
+
+全ての Vuex ゲッターは[純粋関数( pure functions )](https://en.wikipedia.org/wiki/Pure_function)でなければいけません - これらは、ステートツリー全体を取って、単にその状態から別の何か値を返します。これはゲッター関数をテストしやすく、組み立てやすく、また効率的にします。これは他に**ゲッターは、`this`に依存できない**ということを意味します。
+
+もし`this`を参照したくなったら、以下の例のように、単なるコンポーネントの算出プロパティと定義を分ける必要があり、算出プロパティで、コンポーネントの内部 state や props から派生した計算をおこないます。
+
+```js
+vuex: {
+  getters: {
+    currentId: state => state.currentId
+  }
+},
+computed: {
+  isCurrent () {
+    return this.id === this.currentId
+  }
+}
+```
+
+### ゲッターは派生した状態を返すことができる
+
+Vuex ステートゲッター( state getters )は、中身は算出プロパティです。これは、算出プロパティを活用して、リアクティビティ (かつ、効率的) な状態に派生した計算をおこなうことができることを意味します。例えば、全てのメッセージが格納された `messages` という配列を状態として持っているとします。そして、`currentThreadID` は、ユーザーが現在見ているスレッドを表現します。現在のスレッドと関係のあるメッセージのリストを絞り込んで、ユーザーに見せたい場合、以下のように記述します。
+
+```js
+vuex: {
+  getters: {
+    filteredMessages: state => {
+      return state.messages.filter(message => {
+        return message.threadID === state.currentThreadID
+      })
     }
   }
 }
 ```
 
-store にコンポーネントを設定し、そしてリスナを切断または"接続する"心配の必要はりません。覚えておくくべき唯一のことは、**常にあなたの算出プロパティ内部で `store.state.xxx` 経由でステートを参照する**必要があるということです。算出プロパティ外のステートの一部への参照をキャッシュしないでください。
+Vue.js 算出プロパティは自動的にキャッシュされ、再計算は reactive dependency が変化したときのみおこなわれます。なので、全ての変更で関数が呼ばれることを心配する必要はありません。
 
-> Flux リファレンス: これは雑ですが Redux での [`mapStateToProps`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) と NuclearJS での [getters](https://optimizely.github.io/nuclear-js/docs/04-getters.html) と比較することができます。
+### ゲッター( Getters )を複数のコンポーネントの間で共有する
 
-なぜ、ステートにバインドするために `data` を使用しないのでしょうか？次の例を考えてみます:
+見ての通り、`filteredMessages` ゲッターは、複数のコンポーネントで有用そうです。この場合、同じ名前でコンポーネント間で共有するのがよいアイディアです。
+
+``` js
+// getters.js
+export function filteredMessages (state) {
+  return state.messages.filter(message => {
+    return message.threadID === state.currentThreadID
+  })
+}
+```
 
 ``` js
+// コンポーネントでは...
+import { filteredMessages } from './getters'
+
 export default {
-  data () {
-    return {
-      message: store.state.message
+  vuex: {
+    getters: {
+      filteredMessages
     }
   }
 }
 ```
 
-`data` 関数は任意のリアクティブな依存関係を追跡していないため、`store.state.message` への静的な参照だけを取得してます。ステートが後で変異したとき、コンポーネントは何かが変化しときのアイデアを持っていません。比較して、算出プロパティはそれらが評価されたときリアクティブな依存関係を全て追跡し、関連するステートが変異されているとき、反応性を再評価します。
+ゲッターは純粋( pure )なので、複数のコンポーネント間で共有されたゲッターは、効率的にキャッシュされます: 依存関係が変化したとき、ゲッターを利用した全てのコンポーネントのために一度だけ再評価がおこなわれます。
+
+> Fluxを参照: 粗いかもしれませんが、 Vuex ゲッターは Redux の[`mapStateToProps`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) と比較できます。しかし、Vuex ゲッターは Vue の算出プロパティのメモ化を内部で利用しているので、`mapStateToProps` よりも効率的です。[reselect](https://github.com/reactjs/reselect) により似ているでしょう。
 
-### コンポーネントは直接ステートを変異することはできない
+### コンポーネントが直接、状態を変更することはしてはいけない
 
-読み取り専用の算出プロパティを使用すると、**コンポーネントは直接 Vuex store のステートを変異させるべきではない**というルールを強調するのを援助するという別の利点を持っています。全てのステートのミューテーションを明示的および追跡可能にしたいため、全ての vuex store のミューテーションは store のミューテーションハンドラ内部で行われければなりません。
+**コンポーネントは決して直接 Vuex ストアの状態を直接変更してはならない**という大切なことを思い出しましょう。全ての状態変更を、明示的かつ追跡可能にしたいので、全ての Vuex ストアの状態の変更はストアのミューテーションハンドラで行われるべきです。
 
-このルールを強制するのを援助するために、[厳格モード](strict.md) で store のステートがミューテーションハンドラの外部で変異された場合は、Vuex はエラーを投げます。
+このルールを守る手助けをするために、[厳格モード](strict.md)では、ストアのミューテーションハンドラの外でストアの状態が変更されたら、 Vuex はエラーを投げます。
 
-代わりにこのルールでは、私達の Vue コンポーネントははるかに少ない責務で済みます。読み取り専用の算出プロパティを介して Vuex store のステートにバインドされており、ステートに影響を与えるための唯一の方法は、**アクション**によって呼び出され、順番に**ミューテーション** をトリガすることです。必要であれば、まだ所有しローカルステートに操作できますが、もはや個々のコンポーネント内部には、任意のデータフェッチまたはグローバルステートミューテーティングロジックを入れていません。
+このルールがあることで、Vue コンポーネントの責務は非常に小さくなっています: コンポーネントは、読み取り専用のゲッターを通して、 Vuex ストアの状態をコンポーネントに結びつけています。そして、ステートに作用する唯一の方法は**ミューテーション**をトリガーすることです (これについては後で説明します)。コンポーネントはまだ自身の内部の状態を持ったり、作用させることができますが、もはや個々のコンポーネントの内部には、任意のデータフェッチやグローバルな状態の変更ロジックはありません。それらは今、 Vuex に関連するファイル内で集約され、扱われています。これによって、規模の大きいアプリケーションの理解と保守が容易になります。

docs/ja/strict.md

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

docs/ja/structure.md

@@ -1,17 +1,18 @@
 # アプリケーションの構造
 
-Vuex は本当にあなたのコードを構造化する方法を制限するものでありません。むしろ以下の見解が求められます:
+Vuex は実際のところ、あなたがコードを構造化する方法を制限しません。それより高いレベルの原理原則を適用させます:
 
-1. アプリケーションステートは単一オブジェクトで生存します
-2. ミューテーションハンドラだけステートを変異できます
-3. ミューテーションは同期でなければなく、そしてそれらを作成するだけの副作用はミューテーションとステートになるべきです
-4. データフェッチングのような全ての非同期ロジックはアクションで実行されるべきです
+1. アプリケーションの状態は単一のオブジェクトとして、ストアで保持されます
+2. 状態を変更する唯一の方法は、ストアのミューテーションをディスパッチすることです
+3. ミューテーションは同期的である必要があり、それらが発生させる副作用は、状態の変更にすべきです
+4. アクションを定義することで、より表現的な状態変更のAPIを公開できます。アクションはデータ取得のような非同期ロジックを隠蔽することができ、それらが起こす副作用はミューテーションのディスパッチであるべきです
+5. コンポーネントはゲッターを使って、ストアから状態を取り出し、状態を変更するアクションを呼び出します
 
-Vuex のアクションとミューテーションの良いところは、**それらは関数である**ということです。これらのルールに従っている限り、あなたのプロジェクトで構造化する方法はあなた次第です。最も単純な Vuex インスタンスは[単一ファイルで](https://github.com/vuejs/vuex/blob/master/examples/counter/vuex.js)さえ宣言できるということです！しかしながら、これは任意の重大なプロジェクトに対しては十分ではなく、ここではあなたのアプリケーションの規模に応じて、いくつか推奨される構造を紹介します。
+Vuex のミューテーション、アクション、ゲッターの良いところは、**それらが全てただの関数である**ということです。これらのルールに従っている限り、あなたのプロジェクトをどのように構造化するかはあなた次第です。しかし、 Vuex を利用した異なるプロジェクトにすぐに慣れることができるようにいくつかの規約があるとよいでしょう。なので、ここではアプリケーションの規模に応じて、いくつかの推奨の構造を紹介したいと思います。
 
-### 単純なプロジェクト
+### シンプルなプロジェクト
 
-単純なプロジェクトに対しては、単純に**アクション**と**ミューテーション**をそれぞれのファイルに分離することができます:
+シンプルなプロジェクトに対しては、単純に**ストア**と**アクション**をそれぞれのファイルに定義することができます:
 
 ``` bash
 .
@@ -20,114 +21,112 @@ Vuex のアクションとミューテーションの良いところは、**そ
 ├── components
 │   ├── App.vue
 │   └── ...
-└── store
-    ├── index.js     # vuex store をエクスポート
-    ├── actions.js   # 全てのアクションをエクスポート
-    └── mutations.js # 全てのミューテーションをエクスポート
+└── vuex
+    ├── store.js     # ストア (初期状態とミューテーションを含む) を公開
+    └── actions.js   # 全てのアクションを公開
 ```
 
-実際の例として、[TodoMVC example](https://github.com/vuejs/vuex/tree/master/examples/todomvc) を確認してください。
+実際の例として、 [Counter example](https://github.com/vuejs/vuex/tree/master/examples/counter) や [TodoMVC example](https://github.com/vuejs/vuex/tree/master/examples/todomvc) を確認してみてください。
 
-### 中〜大規模プロジェクト
+あるいは、ミューテーションだけをそれ自身のファイルに分割することができます。
 
-任意の素晴らしいアプリケーションに対して、多分、Vuex 関連のコードをさらに私たちのアプリケーションを特定のドメインによって各お気に入りの複数"モジュール" (雑にいうと、純粋な Flux で "stores" にほぼ匹敵)に分離したいです。各サブモジュールはステートのサブツリーを管理することになり、そのサブツリーとそのサブツリーで操作する全てのミューテーションに対する初期ステートをエクスポートします:
+### 中規模から大規模なプロジェクト
 
-``` bash
+それなりに手の込んだアプリケーションであれば、 Vuex 関連のコードをそれぞれがアプリの特定のドメインを担う複数の"モジュール"に分割したくなります(ざっくりと比べれば、普通の Flux の"stores"、 Redux の"reducers"に相当します)。各モジュールは、状態のサブツリーを管理し、サブツリーの初期状態とサブツリーで動作する全ての変更を公開します。
+
+```bash
 ├── index.html
 ├── main.js
 ├── api
-│   └── ... # API リクエストを作成するために抽象化
+│   └── ... # APIリクエストを作成するための抽象化
 ├── components
 │   ├── App.vue
 │   └── ...
-└── store
-    ├── actions.js # 全てのアクションをエクスポート
-    ├── index.js
-    ├── modules
-    │   ├── cart.js       # ステートとカート向けのミューテーション
-    │   └── products.js   # ステートと製品向けのミューテーション
-    └── mutation-types.js # 定数
+└── vuex
+    ├── actions.js        # 全てのアクションのエクスポート
+    ├── store.js          # モジュールを集め、ストアを公開する
+    ├── mutation-types.js # 定数
+    └── modules
+        ├── cart.js       # カートのための状態とミューテーション
+        └── products.js   # 商品のための状態とミューテーション
 ```
 
 典型的なモジュールは次のようになります:
 
 ``` js
 // vuex/modules/products.js
-import { RECEIVE_PRODUCTS, ADD_TO_CART } from '../mutation-types'
-
-// 初期ステート
-export const productsInitialState = []
+import {
+  RECEIVE_PRODUCTS,
+  ADD_TO_CART
+} from '../mutation-types'
+
+// 初期状態
+const state = {
+  all: []
+}
 
 // ミューテーション
-export const productsMutations = {
+const mutations = {
   [RECEIVE_PRODUCTS] (state, products) {
-    state.products = products
+    state.all = products
   },
 
-  [ADD_TO_CART] ({ products }, productId) {
-    const product = products.find(p => p.id === productId)
-    if (product.inventory > 0) {
-      product.inventory--
-    }
+  [ADD_TO_CART] (state, productId) {
+    state.all.find(p => p.id === productId).inventory--
   }
 }
+
+export default {
+  state,
+  mutations
+}
 ```
 
-そして `store/index.js` では、Vuex インスタンスを作成するために複数のモジュールをいっしょに"組み立てます(assemble)":
+そして、`vuex/store.js` では、 Vuex インスタンスを生成するために複数のモジュールをひとつに集めて整理します( "assemble" ):
 
-``` js
+```js
+// vuex/store.js
 import Vue from 'vue'
 import Vuex from '../../../src'
-import * as actions from './actions'
-// modules からパーツをインポート
-import { cartInitialState, cartMutations } from './modules/cart'
-import { productsInitialState, productsMutations } from './modules/products'
+// それぞれのモジュールをインポートする
+import cart from './modules/cart'
+import products from './modules/products'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  // ...
-  // root なステートにサブツリーを結合
-  state: {
-    cart: cartInitialState,
-    products: productsInitialState
-  },
-  // ミューテーションは複数の modules から
-  // ミューテーション定義オブジェクトの配列にすることが可能
-  mutations: [cartMutations, productsMutations]
+  // サブモジュールを組み合わせる
+  modules: {
+    cart,
+    products
+  }
 })
 ```
 
-全てのモジュールは単純にオブジェクトと関数をエクスポートするため、テストとメンテナンスすることが非常に簡単です。また、あなたの好みに合った構造を見つけるためにここで使用されるパターンを変えることは自由です。
+ここで、 `cart` モジュールの初期状態は、ルートステートツリーの `store.state.cart` としてアタッチされます。加えて、全てのサブモジュールで定義されたミューテーションは、それに関係したサブステートツリーを受け取ります。なので、`cart` モジュールで定義されたミューテーションは、`store.state.cart` を第一引数として受け取ることになります。
 
-単一のアクションは、複数のモジュールに影響を与えるミューテーションをディスパッチする可能性があるため、モジュールにアクションを置いていないことに注意してください。また、ステートの形式と、より良い関心事の分離のためにミューテーションの実装詳細からアクションを分離するもの良いアイデアです。アクションファイルが大きくなりすぎた場合は、フォルダにそれを格納し、個々のファイルへ長い非同期アクションの実装を分割できます。
-
-実際の例として、[Shopping Cart Example](https://github.com/vuejs/vuex/tree/master/examples/shopping-cart) を確認してください。
-
-### 共有された算出プロパティ Getter の抽出
-
-大規模なプロジェクトでは、複数のコンポーネントが Vuex のステートに基づいて同じ算出プロパティ (computed property) を必要とする可能性があります。算出プロパティは単に関数であるため、それらが任意のコンポーネントで共有することができるように、ファイルにそれらを分割することができます:
+サブステートツリーのルートは、モジュール内部で自身を取りかえることはできません。例えば、次のコードは動作しません:
 
 ``` js
-// getters.js
-import store from './store'
-
-export function filteredTodos () {
-  return store.state.messages.filter(message => {
-    return message.threadID === store.state.currentThreadID
-  })
+const mutations = {
+  SOME_MUTATION (state) {
+    state = { ... }
+  }
 }
 ```
 
-``` js
-// コンポーネントで...
-import { filteredTodos } from './getters'
+代わりに、常にサブツリーのルートのプロパティに実際の状態を保存します。
 
-export default {
-  computed: {
-    filteredTodos
+``` js
+const mutations = {
+  SOME_MUTATION (state) {
+    state.value = { ... }
   }
 }
 ```
 
-これはとても [NuclearJS での Getter](https://optimizely.github.io/nuclear-js/docs/04-getters.html) と似ています。
+全てのモジュールは単純にオブジェクトと関数をエクスポートしているので、それらはかなり簡単にテストでき、メンテナンスも容易です。そして、ホットリロードできます。また、あなたの好みに合った構造を見つけるためにここで紹介したパターンを変えることは自由です。
+
+アクションをモジュール内に置くことはできないことに注意しましょう。なぜならば、ひとつのアクションが複数のモジュールに影響を与えるミューテーションをディスパッチするかもしれないからです。また、より「関心の分離」を進めるため、状態の形やミューテーションの実装の詳細からアクションを分けることをおすすめします。もし、アクションのファイルが非常に大きくなったら、それをフォルダに移し、長い非同期アクションの実装をいくつかのファイルに分割できます。
+
+例として、 [Shopping Cart Example](https://github.com/vuejs/vuex/tree/master/examples/shopping-cart) をみてみるとよいでしょう。

docs/ja/testing.md

@@ -1,10 +1,24 @@
 # テスト
 
-ミューテーションは完全に引数に依存しているだけの関数であるため、テストするのがとても簡単です。アクションは外部の API を呼び出す可能性があるためより少し注意が必要です。アクションをテストするとき、通常モックのいくつかのレベルで実行する必要があります。例えば、サービスでの API 呼び出しを抽象化することができ、そしてテスト内部でサービスをモックにすることができます。簡単に依存を真似るために、Webpack と [inject-loader](https://github.com/plasticine/inject-loader) をテストファイルにバンドルして使用することができます。
+私達が Vuex でユニットテストしたい主な部分はミューテーションとアクションです。
 
-ミューテーションやアクションが適切に書かれている場合は、テストは適切なモック後、ブラウザの API に直接依存関係を持つべきではありません。したがって、単純に Webpack でテストをバンドルでき、それを直接 Node で実行できます。別の方法として、本当のブラウザでテストを実行するためには、`mocha-loader` または Karma + `karma-webpack` を使用できます。
+### ミューテーションのテスト
 
-Mocha + Chai を使用してミューテーションをテストする例です (好きな任意のフレームワーク/アサーションライブラリを使用できます):
+ミューテーションは完全に引数に依存しているだけの関数であるため、テストするのがとても簡単です。効果的なやり方として、もし ES2015 のモジュールを使っていて、 `store.js` ファイルの中にミューテーションがあるなら、デフォルトエクスポートに加えて、名前付きエクスポートでミューテーションをエクスポートできます。
+
+``` js
+const state = { ... }
+
+// 名前付きエクスポートでミューテーションをエクスポートする
+export const mutations = { ... }
+
+export default new Vuex.Store({
+  state,
+  mutations
+})
+```
+
+Mocha + Chai を使用してミューテーションをテストする例です (あなたの好きな任意のフレームワーク/アサーションライブラリを使用できます):
 
 ``` js
 // mutations.js
@@ -14,11 +28,14 @@ export const INCREMENT = state => state.count++
 ``` js
 // mutations.spec.js
 import { expect } from 'chai'
-import { INCREMENT } from './mutations'
+import { mutations } from './store'
+
+// ミューテーションの分割束縛
+const { INCREMENT } = mutations
 
 describe('mutations', () => {
   it('INCREMENT', () => {
-    // モックステート
+    // ステートのモック
     const state = { count: 0 }
     // ミューテーションを適用
     INCREMENT(state)
@@ -28,7 +45,11 @@ describe('mutations', () => {
 })
 ```
 
-Example testing an async action:
+### アクションのテスト
+
+アクションは外部の API を呼び出す可能性があるためより少し注意が必要です。アクションをテストするとき、通常、いくつかの段階でモックを作る必要があります。例えば、API 呼び出しをサービスとして抽象化し、そしてテストの内部ではそのサービスをモックにすることができます。簡単に依存をモック化するために、Webpack と [inject-loader](https://github.com/plasticine/inject-loader) をテストファイルにバンドルして使用することができます。
+
+非同期アクションのテストの例:
 
 ``` js
 // actions.js
@@ -45,8 +66,8 @@ export const getAllProducts = ({ dispatch }) => {
 ``` js
 // actions.spec.js
 
-// inline loader に対して require 構文を使用する
-// inject-loader は、真似られた依存関係を注入できるようにする
+// inline loader のために require 構文を使用する
+// inject-loader は、モック化された依存関係を注入できるようにする
 // モジュールファクトリを返す
 import { expect } from 'chai'
 const actionsInjector = require('inject!./actions')
@@ -56,17 +77,17 @@ const actions = actionsInjector({
   '../api/shop': {
     getProducts (cb) {
       setTimeout(() => {
-        cb([ /* 真似られたスポンス */ ])
+        cb([ /* レスポンスのモック */ ])
       }, 100)
     }
   }
 })
 
-// ミューテーションによって予期されたアクションをテストするためのヘルパー
-const testAction = (action, state, expectedMutations, done) => {
+// アクションが期待されるミューテーションを呼び出すかをテストするためのヘルパー
+const testAction = (action, args, state, expectedMutations, done) => {
   let count = 0
-  // モックディスパッチ
-  const dispatch = (name, payload) => {
+  // ディスパッチのモック
+  const dispatch = (name, ...payload) => {
     const mutation = expectedMutations[count]
     expect(mutation.name).to.equal(name)
     if (payload) {
@@ -77,24 +98,31 @@ const testAction = (action, state, expectedMutations, done) => {
       done()
     }
   }
-  // 真似られた store によってアクションを呼び出す
-  action({
-    dispatch,
-    state
-  })
+  // モック化したストアと引数でアクションを呼び出す
+  action({dispatch, state}, ...args)
+
+  // 呼び出されるべきミューテーションが残っていないことを確認する
+  if (expectedMutations.length === 0) {
+    expect(count).to.equal(0)
+    done()
+  }
 }
 
 describe('actions', () => {
   it('getAllProducts', done => {
-    testAction(actions.getAllProducts, {}, [
+    testAction(actions.getAllProducts, [], {}, [
       { name: 'REQUEST_PRODUCTS' },
-      { name: 'RECEIVE_PRODUCTS', payload: [ /* 真似られたレスポンス */ ] }
+      { name: 'RECEIVE_PRODUCTS', payload: [ /* レスポンスのモック */ ] }
     ], done)
   })
 })
 ```
 
-### Node での実行
+### テストの実行
+
+ミューテーションやアクションが適切に書かれている場合は、適切にモック化された後、テストコードはブラウザの API に直接依存関係を持つことはないでしょう。したがって、単純に Webpack でテストをバンドルでき、それを直接 Node で実行できます。別の方法として、本当のブラウザでテストを実行するためには、`mocha-loader` または Karma + `karma-webpack` を使用できます。
+
+#### Node での実行
 
 以下のような webpack の設定を作成します:
 
@@ -127,9 +155,13 @@ webpack
 mocha test-bundle.js
 ```
 
-### ブラウザでの実行
+#### ブラウザでの実行
 
 1. `mocha-loader` をインストール
 2. 上記 Webpack 設定から `entry` を `'mocha!babel!./test.js'` に変更
 3. 設定を使用して `webpack-dev-server` を開始
 4. `localhost:8080/webpack-dev-server/test-bundle` に移動
+
+#### Karma + karma-webpack を使ったブラウザでの実行
+
+[vue-loader documentation](http://vuejs.github.io/vue-loader/en/workflow/testing.html) 内のセットアップ方法を参考にしてください。

docs/ja/tutorial.md

@@ -0,0 +1,263 @@
+# チュートリアル
+
+Vuex の使い方を理解するために、Vuex を使った非常に簡単なアプリケーションを作ってみましょう。次の例では、ボタンを押すとカウンターをインクリメントするアプリケーションを作ります。
+
+![最終結果](tutorial/result.png)
+
+この簡単な例を使って Vuex のコンセプトと、解決しようとしている課題（様々なコンポーネントを用いた大きなアプリケーションをどのように構築するか）を説明します。この例では以下の3つのコンポーネントが使われます。
+
+### `components/App.vue`
+
+これはルートとなるコンポーネントで、2つの子コンポーネントを持ちます。
+
+* `Display` は現在のカウンターの値を表示します。
+* `Increment` は現在の値をインクリメントするボタンです。
+
+```html
+<template>
+  <div>
+    <Display></Display>
+    <Increment></Increment>
+  </div>
+</template>
+
+<script>
+
+import Display from './Display.vue'
+import Increment from './Increment.vue'
+
+export default {
+  components: {
+    Display: Display,
+    Increment: Increment
+  }
+}
+</script>
+```
+
+### `components/Display.vue`
+
+```html
+<template>
+  <div>
+    <h3>Count is 0</h3>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+```
+
+### `components/Increment.vue`
+
+```html
+<template>
+  <div>
+    <button>Increment +1</button>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+```
+
+### Vuex が無い場合の課題
+
+* `Increment` と `Display` は互いに独立しているため、メッセージを送り合うことができません。
+* `App` はこの2つのコンポーネントを協調させるため、イベントの橋渡しをする必要があるでしょう。
+* `App` が2つのコンポーネントの橋渡しをしてしまうことで、コンポーネントが密結合してしまい、再利用できなくなってしまいます。アプリケーションの再構築によって壊れてしまうでしょう。
+
+### Vuex の "フロー"
+
+Vuex には以下の順で発生するステップがあります。
+
+![Vuex のフロー](tutorial/vuex_flow.png)
+
+これはカウンターをインクリメントするには少しやり過ぎかもしれません。しかし、大きなアプリケーションではこれらのコンセプトが、保守性を高め、デバッグをしやすくし、長期間の改善をするために有効であることを頭に入れておいてください。それでは、Vuex を使ったコードに修正してみましょう。
+
+### ステップ 1：ストアを追加する
+
+ストアはアプリケーションのデータを保持します。すべてのコンポーネントはストアからデータを読みます。まずはじめに、npm から Vuex をインストールしましょう。
+
+```
+$ npm install --save vuex
+```
+
+新しく `vuex/store.js` ファイルを作ります。
+
+```js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+// Vuex を使うことを vue に知らせます。
+Vue.use(Vuex)
+
+// アプリケーションが起動した時のステート（初期状態）を
+// 保持するためのオブジェクトを作ります。
+const state = {
+  // TODO: 初期状態を用意する
+}
+
+// 様々なミューテーションのためのオブジェクトを作ります。ミューテーションは後で書きます。
+const mutations = {
+  // TODO: ミューテーションを用意する
+}
+
+// 初期状態とミューテーションを結合し、Vuex のストアを作成します。
+// このストアは私達のアプリケーションへつなげることができます。
+export default new Vuex.Store({
+  state,
+  mutations
+})
+```
+
+次に、アプリケーションとこのストアをつなげる必要があります。そのために、ルートのコンポーネントを少々修正する必要があります。
+
+`components/App.vue` を編集し、ストアを追加しましょう。
+
+```js
+import Display from './Display.vue'
+import Increment from './Increment.vue'
+import store from '../vuex/store' // 作成したストアをインポートします。
+
+export default {
+  components: {
+    Display: Display,
+    Increment: Increment
+  },
+  store: store // このコンポーネントとすべての子孫コンポーネントからストアを使用できるようにします。
+}
+```
+
+> **Tip**: ES6 および babel を使用していれば、以下のようにも書けます。
+>
+>     components: {
+>       Display,
+>       Increment,
+>     },
+>     store
+
+### ステップ 2：アクションを用意する
+
+アクションはコンポーネントから呼び出される関数です。アクション関数は対応するミューテーションをディスパッチすることで、ストアを更新することができます。アクションは更新をディスパッチする前に、その他のデータを読み込むために HTTP バックエンドと通信することも可能です。
+
+`incrementCounter` 関数を持つ、新しいファイル `vuex/action.js` を作成しましょう。
+
+```js
+// アクションは1番目の引数にストアを受け取ります。
+// 私達はディスパッチ（と時にはステートにも）のみに興味を持っているため、
+// ES6 の分割束縛（destructuring）機能を使用して、これらの2つのパラメータを取得することもできます。
+export const incrementCounter = function ({ dispatch, state }) {
+  dispatch('INCREMENT', 1)
+}
+```
+
+そして、 `components/Increment.vue` コンポーネントからこのアクションを呼び出しましょう。
+
+```html
+<template>
+  <div>
+    <button @click='increment'>Increment +1</button>
+  </div>
+</template>
+
+<script>
+import { incrementCounter } from '../vuex/actions'
+export default {
+  vuex: {
+    actions: {
+      increment: incrementCounter
+    }
+  }
+}
+</script>
+```
+
+上の例で追加されたものについての興味深い事実を説明します。
+
+1. 新しいアクションを加えるための `vuex.actions` という新しいオブジェクトを定義しています。
+2. ストア、オブジェクト、ステートなどを明示していません。 Vuex がこれらすべてをつなげてくれます。
+3. どのメソッド内でも `this.increment()` と書くことでアクションを呼び出すことができます。
+4. 通常の Vue コンポーネントのメソッドのように、 `@click` パラメーターに `increment` を指定することでもアクションを呼び出すことができます。
+5. ここでのアクションは `incrementCounter` と名付けましたが、任意の適切な名前をつけることができます。
+
+### ステップ 3：ステートとミューテーションを用意する
+
+`vuex/actions.js` ファイル内では `INCREMENT` ミューテーションをディスパッチしていますが、まだそれをどのように処理するかは書かれていません。次はそれを書きましょう。
+
+`vuex/store.js` を編集します。
+
+```js
+const state = {
+  // アプリケーションがスタートする時、カウントが 0 にセットされます。
+  count: 0
+}
+
+const mutations = {
+  // ミューテーションは現在のステートを1番目の引数に受け取ります。
+  // この関数内では任意の更新を行うことができます。
+  INCREMENT (state, amount) {
+    state.count = state.count + amount
+  }
+}
+```
+
+### ステップ 4：コンポーネントへ値を渡す
+
+`vuex/getters.js` という名前の新しいファイルを作ります。
+
+```js
+// このゲッターはただカウントを返すだけの関数です。
+// ES6 では以下のようにも書けます。
+// export const getCount = state => state.count
+
+export function getCount (state) {
+  return state.count
+}
+```
+
+この関数は、現在のカウントのような、関心を持っているステートオブジェクトの一部を返します。これにより、コンポーネント内でこのゲッターを使用することができます。
+
+`components/Display.vue` を編集します。
+
+```html
+<template>
+  <div>
+    <h3>Count is {{ counterValue }}</h3>
+  </div>
+</template>
+
+<script>
+import { getCount } from '../vuex/getters'
+export default {
+  vuex: {
+    getters: {
+      // `getCount()` のような値を渡すのではなく、関数自身を渡すことに注意してください
+      counterValue: getCount
+    }
+  }
+}
+</script>
+```
+
+新しいオブジェクト `vuex.getters` が追加され、 `getCount` ゲッターへと束縛される `counterValue` を定義しています。ゲッター自身の名前と同じにする必要はありません。この例では、コンポーネントの文脈で意味のある名前を使えるということを示すために異なる名前を使用しています。
+
+あなたはおそらく、なぜ直接ステートの値にアクセスせずにゲッターを使用するのか不思議に思っていることでしょう。このコンセプトはベストプラクティスであり、大きなアプリケーションにより適しています。これは以下のように明確な複数の利点があります。
+
+1. 計算後の値をとりだすゲッターを定義したい場合があるでしょう（たとえば、合計、平均、など）。
+2. 大きなアプリケーション内の多くのコンポーネントは同一のゲッター関数を使用することができます。
+3. もし値が `store.count` から `store.coutner.value` に変わった時、多数のコンポーネントを書き換えるのではなく、ただ1つのゲッターを更新するだけですみます。
+
+### ステップ 5：次のステップ
+
+このアプリケーションを実行すると、期待した通りに動くことを確認できるでしょう。
+
+Vuex の理解をより深めるため、演習として、次の変更をこのアプリケーションに実装してみると良いでしょう。
+
+* デクリメントボタンを追加してみましょう。
+* [VueJS Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja) をインストールし、 Vuex のツールとともに実行し、適用されるミューテーションを見てみましょう。
+* テキスト入力を持つ `IncrementAmount` という名前のコンポーネントを追加し、インクリメントする数を入力できるようにしましょう。これは、Vuex のフォームが少々異なる動作をするため、少しトリッキーです。より詳細については[フォームハンドリング](forms.md)の節を読んでください。