diff --git a/docs/ja/SUMMARY.md b/docs/ja/SUMMARY.md index 0d99c62c1..948e09493 100644 --- a/docs/ja/SUMMARY.md +++ b/docs/ja/SUMMARY.md @@ -1,15 +1,12 @@ # Vuex - -> 注意: これは vuex@2.x のドキュメントです - +> 注意: TypeScript ユーザ向けは、vuex@>= 3.0 と vue@>=2.5 が必須、逆もまた同様です。 -- [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) -- コアコンセプト +- [コアコンセプト](core-concepts.md) - [ステート](state.md) - [ゲッター](getters.md) - [ミューテーション](mutations.md) diff --git a/docs/ja/api.md b/docs/ja/api.md index 6b751187f..6b03b8385 100644 --- a/docs/ja/api.md +++ b/docs/ja/api.md @@ -12,11 +12,11 @@ const store = new Vuex.Store({ ...options }) - **state** - - 型: `Object` + - 型: `Object | Function` - ストアのための ルートステートオブジェクトです。 + ストアのための ルートステートオブジェクトです。[詳細](state.md) - [詳細](state.md) + オブジェクトを返す関数を渡す場合、返されたオブジェクトはルートステートとして使用されます。これは特にモジュールの再利用のためにステートオブジェクトを再利用する場合に便利です。[詳細](modules.md#モジュールの再利用) - **mutations** @@ -156,10 +156,27 @@ const store = new Vuex.Store({ ...options }) プラグインの中でもっともよく利用されます。[詳細](plugins.md) -- **`registerModule(path: string | Array, module: Module)`** +- **`subscribeAction(handler: Function)`** + + > 2.5.0 で新規追加 + + ストアアクションを購読します。`handler` はディスパッチされたアクションごとに呼び出され、アクション記述子と現在のストア状態を引数として受け取ります: + + ``` js + store.subscribeAction((action, state) => { + console.log(action.type) + console.log(action.payload) + }) + ``` + + プラグインで最も一般的に使用されます。[Details](plugins.md) + +- **`registerModule(path: string | Array, module: Module, options?: Object)`** 動的なモジュールを登録します。[詳細](modules.md#dynamic-module-registration) + `options` は前の状態を保存する `preserveState: true` を持つことができます。サーバサイドレンダリングに役立ちます。 + - **`unregisterModule(path: string | Array)`** 動的なモジュールを解除します。[詳細](modules.md#dynamic-module-registration) @@ -193,3 +210,7 @@ const store = new Vuex.Store({ ...options }) ミューテーションをコミットするコンポーネントの methods オプションを作成します。[詳細](mutations.md#commiting-mutations-in-components) 第1引数は、オプションで名前空間文字列にすることができます。[詳細](modules.md#binding-helpers-with-namespace) + +- **`createNamespacedHelpers(namespace: string): Object`** + + 名前空間付けられたコンポーネントバインディングのヘルパーを作成します。返されるオブジェクトは指定された名前空間にバインドされた `mapState`、`mapGetters`、`mapActions` そして `mapMutations` が含まれます。[詳細はこちら](modules.md#binding-helpers-with-namespace) diff --git a/docs/ja/core-concepts.md b/docs/ja/core-concepts.md new file mode 100644 index 000000000..7e3bf3eb1 --- /dev/null +++ b/docs/ja/core-concepts.md @@ -0,0 +1,12 @@ +# コアコンセプト + +この章では、Vuex のコアコンセプトについて、以下を学習します。 + - [ステート](state.md) + - [ゲッター](getters.md) + - [ミューテーション](mutations.md) + - [アクション](actions.md) + - [モジュール](modules.md) + +これらのコンセプトを深く理解することは、Vuex を使用するにあたって不可欠です。 + +それでは、始めましょう! diff --git a/docs/ja/modules.md b/docs/ja/modules.md index 5060d1e0d..4e9b8d9c4 100644 --- a/docs/ja/modules.md +++ b/docs/ja/modules.md @@ -206,6 +206,31 @@ methods: { } ``` +さらに、`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 ストアに追加できるようにすると、モジュールの予測できない名前空間が気になるかもしれません。あなたのモジュールは、プラグインユーザーが名前空間付きモジュールの元にモジュールを追加すると、その名前空間に属するようになります。この状況に適応するには、プラグインオプションを使用して名前空間の値を受け取る必要があります。 @@ -244,6 +269,8 @@ store.registerModule(['nested', 'myModule'], { `store.unregisterModule(moduleName)` を呼び出せば、動的に登録したモジュールを削除できます。ただしストア作成(store creation)の際に宣言された、静的なモジュールはこのメソッドで削除できないことに注意してください。 +サーバサイドレンダリングされたアプリケーションから状態を保持するなど、新しいモジュールを登録するときに、以前の状態を保持したい場合があります。`preserveState` オプション(`store.registerModule('a', module, { preserveState: true })`)でこれを実現できます。 + ### モジュールの再利用 時どき、モジュールの複数インスタンスを作成する必要があるかもしれません。例えば: diff --git a/docs/ja/plugins.md b/docs/ja/plugins.md index 690cf2396..5c1ae4f58 100644 --- a/docs/ja/plugins.md +++ b/docs/ja/plugins.md @@ -116,7 +116,8 @@ const logger = createLogger({ // ミューテーションは、`{ type, payload }` の形式でログ出力されます // 任意の方法でそれをフォーマットできます return mutation.type - } + }, + logger: console, // `console` API の実装, デフォルトは `console` }) ``` diff --git a/docs/ja/state.md b/docs/ja/state.md index 6a2532d0f..e52bc1b48 100644 --- a/docs/ja/state.md +++ b/docs/ja/state.md @@ -57,7 +57,7 @@ const Counter = { ### `mapState`  ヘルパー -コンポーネントが複数のストアのステートプロパティやゲッターを必要としているとき、これらすべてにおいて、算出プロパティを宣言することは繰り返しで冗長です。これに対処するため、算出ゲッター関数を生成し、いくつかのキーストロークを節約するのに役立つ `mapState` ヘルパーを使うことができます: +コンポーネントが複数のストアのステートプロパティやゲッターを必要としているとき、これらすべてにおいて、算出プロパティを宣言することは繰り返しで冗長です。これに対処するため、算出ゲッター関数を生成し、いくつかのキーストロークを省くのに役立つ `mapState` ヘルパーを使うことができます: ```js // 完全ビルドでは、ヘルパーは Vuex.mapState として公開されています diff --git a/docs/ja/testing.md b/docs/ja/testing.md index ea8970b4b..531ff9bd5 100644 --- a/docs/ja/testing.md +++ b/docs/ja/testing.md @@ -218,4 +218,4 @@ mocha test-bundle.js #### Karma + karma-webpack を使ったブラウザでの実行 -[vue-loader documentation](http://vue-loader.vuejs.org/en/workflow/testing.html) 内のセットアップ方法を参考にしてください。 +[vue-loader ドキュメント](https://vue-loader.vuejs.org/ja/workflow/testing.html) 内のセットアップ方法を参考にしてください。