-
-
Notifications
You must be signed in to change notification settings - Fork 9.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Translate v2 docs in Japanese. (#428)
* Starting japanese translation. * Move intro.md from v1.0 * Installation.md in Japanese * translate headers * Copy docs/en/getting-started.md from 1.0 * Copy docs/en/getting-started.md from 2.0, understanding diff 1.0 and 2.0 * Copy docs/ja/getting-started.md from 1.0 * Translated the part of getting-started.md which has no diff 1.0 and 2.0 * Translate getting-started.md * Make getting-started.md more readable * Tiny change * Translate intro * translate intro * Copy docs/en/getters.md to ja * Translate getters.md * Translate mapGetters helper * Copy docs/en/mutations.md from 1.0 * Copy docs/en/mutations.md from 2.0, understanding diff 1.0 and 2.0 * Copy docs/ja/mutations.md from 1.0 * Translate mutations.md * Delete unnecessary rows * Copy actions.md from 1.0 * Copy actions.md from 2.0, understanding diff 1.0 and 2.0 * Copy docs/ja/actions.md from 1.0 * Translate state * Translate dispatching actions * Translate actions.md * Copy docs/en/modules.md to docs/ja/modules.md * Translate modules.md * Translate title of docs/ja/modules.md * Copy docs/en/structure.md of 1.0 to docs/ja/structure.md * Copy docs/en/structure.md of 2.0, understanding diff 1.0 and 2.0 * Copy version 1.0 of docs/ja/structure.md * Translate structure.md * Copy docs/en/testing.md of 1.0 to docs/ja/testing.md * Copy docs/en/testing.md of 2.0, understanding diff 1.0 and 2.0 * Copy version 1.0 of docs/ja/testing.md * Translate testing mutations * Translate testing actions * Translate docs/ja/testing.md * Copy docs/en/strict.md 1.0 to docs/ja/strict.md * Copy version 1.0 of docs/ja/strict.md * Translate strict.md * Add hot-reload * Translate plugins * Translate forms * Translate SUMMARY * Improve intro * Improve * Improve translation of resolve * Improve translation of actions.md * Fix translation of docs/ja/getters.md * Cut off the broken link * Fix typo * Improve translation * Improve * Improve intro translation * Improve translation * Improve * Improve * Link to old japanese document * Reflect review by @ktsn * Reflect #470 * Reflect #438 * Reflect change of actions.md in #421 * Translate docs/ja/api.md * Replace プロミス with Promise * Improve translation of 'expose' * Improve translation of 'component methods options' * Fix indent * Improve translation * Replace Vue store with ストア * Improve transration * Fix arguments of dispatch and watch * Improve translation * Fix indent * Improve translation * Improve translation * Improve translation * Add README.md and book.json
- Loading branch information
Showing
22 changed files
with
1,563 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,4 +2,5 @@ | |
* [2.0 - 简体中文](zh-cn/) | ||
* [2.0 - Français](fr/) | ||
* [2.0 - Русский](ru/) | ||
* [2.0 - 日本語](ja/) | ||
* [1.0 Docs](old/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
{% include "./SUMMARY.md" %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
# Vuex | ||
|
||
> 注意: これは vuex@2.x のドキュメントです | ||
- [1.0のドキュメントをお探しですか?](https://github.com/vuejs/vuex/tree/1.0/docs/ja) | ||
- [リリースノート](https://github.com/vuejs/vuex/releases) | ||
- [インストール](installation.md) | ||
- [Vuex とは何か?](intro.md) | ||
- [Vuex 入門](getting-started.md) | ||
- コアコンセプト | ||
- [ステート](state.md) | ||
- [ゲッター](getters.md) | ||
- [ミューテーション](mutations.md) | ||
- [アクション](actions.md) | ||
- [モジュール](modules.md) | ||
- [アプリケーションの構造](structure.md) | ||
- [プラグイン](plugins.md) | ||
- [厳格モード](strict.md) | ||
- [フォームの扱い](forms.md) | ||
- [テスト](testing.md) | ||
- [ホットリローディング](hot-reload.md) | ||
- [API リファレンス](api.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,174 @@ | ||
# アクション | ||
|
||
アクションはミューテーションと似ていますが、下記の点で異なります: | ||
|
||
- アクションは、状態を変更するのではなく、ミューテーションをコミットします。 | ||
- アクションは任意の非同期処理を含むことができます。 | ||
|
||
シンプルなアクションを登録してみましょう: | ||
|
||
``` 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({ | ||
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') | ||
}) | ||
} | ||
} | ||
``` | ||
|
||
最終的に JavaScript の機能として近く導入される [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 が戻り値として返ってくることになります。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,179 @@ | ||
# API リファレンス | ||
|
||
### Vuex.Store | ||
|
||
``` js | ||
import Vuex from 'vuex' | ||
|
||
const store = new Vuex.Store({ ...options }) | ||
``` | ||
|
||
### Vuex.Store コンストラクタオプション | ||
|
||
- **state** | ||
|
||
- 型: `Object` | ||
|
||
ストアのための ルートステートオブジェクトです。 | ||
|
||
[詳細](state.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 と同じ | ||
} | ||
``` | ||
|
||
[詳細](actions.md) | ||
|
||
- **getters** | ||
|
||
- type: `{ [key: string]: Function }` | ||
|
||
ストアにゲッターを登録します. ゲッター関数は次の引数を受け取ります: | ||
|
||
``` | ||
state, // モジュール内で定義されていればモジュールのローカルステート | ||
getters, // store.getters と同じ | ||
rootState // store.state と同じ | ||
``` | ||
|
||
登録されたゲッターは `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(type: string, payload?: any) | commit(mutation: Object)`** | ||
ミューテーションをコミットします。[詳細](mutations.md) | ||
- **`dispatch(type: string, payload?: any) | dispatch(action: Object)`** | ||
アクションをディスパッチします。すべてのトリガーされたアクションハンドラを解決するPromiseを返します。[詳細](actions.md) | ||
- **`replaceState(state: Object)`** | ||
ストアのルートステートを置き換えます。これは、ステートのハイドレーションやタイムトラベルのためだけに利用すべきです。 | ||
- **`watch(getter: Function, cb: Function, options?: Object)`** | ||
リアクティブにゲッター関数の返す値を監視します。値が変わった場合は、コールバックを呼びます。ゲッターはストアの状態のみを引数として受け取ります。 Vue の`vm.$watch`メソッドと同じオプションをオプションのオブジェクトとして受け付けます。 | ||
監視を止める場合は、ハンドラ関数の返り値を関数として呼び出します。 | ||
- **`subscribe(handler: Function)`** | ||
ストアへのミューテーションを購読します。`handler` は、全てのミューテーションの後に呼ばれ、引数として、ミューテーション ディスクリプタとミューテーション後の状態を受け取ります。 | ||
``` js | ||
store.subscribe((mutation, state) => { | ||
console.log(mutation.type) | ||
console.log(mutation.payload) | ||
}) | ||
``` | ||
プラグインの中でもっともよく利用されます。[詳細](plugins.md) | ||
- **`registerModule(path: string | Array<string>, module: Module)`** | ||
動的なモジュールを登録します。[詳細](modules.md#dynamic-module-registration) | ||
- **`unregisterModule(path: string | Array<string>)`** | ||
動的なモジュールを解除します。[詳細](modules.md#dynamic-module-registration) | ||
- **`hotUpdate(newOptions: Object)`** | ||
新しいアクションとミューテーションをホットスワップします。[詳細](hot-reload.md) | ||
### コンポーネントをバインドするヘルパー | ||
- **`mapState(map: Array<string> | Object): Object`** | ||
ストアのサブツリーを返すコンポーネントの computed オプションを作成します。[詳細](state.md#the-mapstate-helper) | ||
- **`mapGetters(map: Array<string> | Object): Object`** | ||
ゲッターの評価後の値を返すコンポーネントの computed オプションを作成します。[詳細](getters.md#the-mapgetters-helper) | ||
- **`mapActions(map: Array<string> | Object): Object`** | ||
アクションをディスパッチするコンポーネントの methods オプションを作成します。[詳細](actions.md#dispatching-actions-in-components) | ||
- **`mapMutations(map: Array<string> | Object): Object`** | ||
ミューテーションをコミットするコンポーネントの methods オプションを作成します。[詳細](mutations.md#commiting-mutations-in-components) |
Oops, something went wrong.