From 52fe045cb9d12e0a50c2b1a9110eea0e9deb3228 Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Thu, 31 Jan 2019 22:42:33 +0900 Subject: [PATCH] docs: update ja docs (#1497) * docs(ja): update plugin.md ref: https://github.com/vuejs/vuex/commit/3d3e4e061ccbc6c84a684380ab5074c5418be1a7 * docs(ja): update api/README.md ref: https://github.com/vuejs/vuex/commit/be75d41cf54d50177a7db7e9218e8d1c820ae830 * docs(ja): translate previous commit * docs(ja): add link ref: https://github.com/vuejs/vuex/commit/bd23b9ad37151085ae4cb8d0456be0812a3f03ce * docs(ja): update hot-reload.md ref: https://github.com/vuejs/vuex/commit/ee7c6f3b60f5665f7aaf10a7e9fd49366cc01476 * docs(ja): remove stage-3 ref: https://github.com/vuejs/vuex/commit/de0515254ccd25268df93477f36702472da9e83f * docs(ja): add sentence from en docs ref: https://github.com/vuejs/vuex/commit/095ccc396a7fb81613f0b9ff374b6c610b186c3e * docs(ja): translate previous commit * docs(ja): add video * docs(ja): replce component ref: https://github.com/vuejs/vuex/commit/2dfdd83ea55e5169f640b6cf1d0e4d1a2cee2bfb * docs(ja): add new API docs ref: https://github.com/vuejs/vuex/commit/431540b4637f367698f4849f91d5d326fd9c35b7 * docs(ja): translate previous commit --- docs/ja/README.md | 2 ++ docs/ja/api/README.md | 34 ++++++++++++++++++++++++++++++++-- docs/ja/guide/actions.md | 2 +- docs/ja/guide/hot-reload.md | 2 +- docs/ja/guide/mutations.md | 2 +- docs/ja/guide/plugins.md | 2 +- 6 files changed, 38 insertions(+), 6 deletions(-) diff --git a/docs/ja/README.md b/docs/ja/README.md index f1b0e21ba..88d3e3c5b 100644 --- a/docs/ja/README.md +++ b/docs/ja/README.md @@ -1,5 +1,7 @@ # Vuex とは何か？ + + Vuex は Vue.js アプリケーションのための **状態管理パターン + ライブラリ**です。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 また Vue 公式の[開発ツール拡張](https://github.com/vuejs/vue-devtools)と連携し、設定なしでタイムトラベルデバッグやステートのスナップショットのエクスポートやインポートのような高度な機能を提供します。 diff --git a/docs/ja/api/README.md b/docs/ja/api/README.md index 250363b49..43afe97c7 100644 --- a/docs/ja/api/README.md +++ b/docs/ja/api/README.md @@ -116,6 +116,19 @@ const store = new Vuex.Store({ ...options }) [詳細](../guide/strict.md) + +### devtools + + - 型: `Boolean` + + 特定の Vuex インスタンスに対して開発ツールをオン、またはオフにします。インスタンスに false を渡すと、開発ツールのプラグインを購読しないように Vuex ストアに伝えます。1 ページに複数のストアがある場合に便利です。 + + ``` js + { + devtools: false + } + ``` + ## Vuex.Store インスタンスプロパティ ### state @@ -156,7 +169,7 @@ const store = new Vuex.Store({ ...options }) - **`watch(fn: Function, callback: Function, options?: Object): Function`** - `fn`が返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。`fn`は最初の引数としてストアのステートを、2番目の引数としてゲッターを受け取ります。 Vue の`vm.$watch`メソッドと同じオプションをオプションのオブジェクトとして受け付けます。 + `fn`が返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。`fn`は最初の引数としてストアのステートを、2番目の引数としてゲッターを受け取ります。 [Vue の`vm.$watch`メソッド](https://jp.vuejs.org/v2/api/#watch)と同じオプションをオプションのオブジェクトとして受け付けます。 監視を止める場合は、返された unwatch 関数を呼び出します。 @@ -192,7 +205,24 @@ const store = new Vuex.Store({ ...options }) }) ``` -　プラグインで最も一般的に使用されます。[Details](../guide/plugins.md) +　購読を停止するには、返された購読解除関数を呼びます。 + + > 3.1.0 で新規追加 + + 3.1.0 から、`subscribeAction` は購読ハンドラがアクションディスパッチの*前 (before)*、または*後 (after)*に呼びだすべきかどうか(デフォルトの動作は、*before* です)指定することもできます。 + + ``` js + store.subscribeAction({ + before: (action, state) => { + console.log(`before action ${action.type}`) + }, + after: (action, state) => { + console.log(`after action ${action.type}`) + } + }) + ``` + +　プラグインで最も一般的に使用されます。[詳細](../guide/plugins.md) ### registerModule diff --git a/docs/ja/guide/actions.md b/docs/ja/guide/actions.md index 5ef205768..a37242917 100644 --- a/docs/ja/guide/actions.md +++ b/docs/ja/guide/actions.md @@ -25,7 +25,7 @@ const store = new Vuex.Store({ }) ``` -アクションハンドラはストアインスタンスのメソッドやプロパティのセットと同じものを呼び出せるコンテキストオブジェクトを受け取ります。したがって `context.commit` を呼び出すことでミューテーションをコミットできます。あるいは `context.state` や `context.getters` で、状態やゲッターにアクセスできます。なぜコンテキストオブジェクトがストアインスタンスそのものではないのかは、後ほど[モジュール](modules.md)で説明します。 +アクションハンドラはストアインスタンスのメソッドやプロパティのセットと同じものを呼び出せるコンテキストオブジェクトを受け取ります。したがって `context.commit` を呼び出すことでミューテーションをコミットできます。あるいは `context.state` や `context.getters` で、状態やゲッターにアクセスできます。他のアクションも `context.dispatch` で呼ぶこともできます。なぜコンテキストオブジェクトがストアインスタンスそのものではないのかは、後ほど[モジュール](modules.md)で説明します。 実際にはコードを少しシンプルにするために ES2015 の[引数分割束縛（argument destructuring）](https://github.com/lukehoban/es6features#destructuring)がよく使われます（特に `commit` を複数回呼び出す必要があるとき）: diff --git a/docs/ja/guide/hot-reload.md b/docs/ja/guide/hot-reload.md index cfc7c5791..8283537fd 100644 --- a/docs/ja/guide/hot-reload.md +++ b/docs/ja/guide/hot-reload.md @@ -30,7 +30,7 @@ if (module.hot) { // babel 6 のモジュール出力のため、ここでは .default を追加しなければならない const newActions = require('./actions').default const newMutations = require('./mutations').default - // 新しいアクションとミューテーションにスワップ + // 新しいモジュールとミューテーションにスワップ store.hotUpdate({ mutations: newMutations, modules: { diff --git a/docs/ja/guide/mutations.md b/docs/ja/guide/mutations.md index 77d6c864d..967ce9db2 100644 --- a/docs/ja/guide/mutations.md +++ b/docs/ja/guide/mutations.md @@ -88,7 +88,7 @@ Vuex ストアの状態は Vue によってリアクティブになっている - `Vue.set(obj, 'newProp', 123)` を使用する。あるいは - - 全く新しいオブジェクトで既存のオブジェクトを置き換える。例えば、stage-3 の[スプレッドシンタックス（object spread syntax）](https://github.com/sebmarkbage/ecmascript-rest-spread) を使用して、次のように書くことができます: + - 全く新しいオブジェクトで既存のオブジェクトを置き換える。例えば、[スプレッドシンタックス（object spread syntax）](https://github.com/sebmarkbage/ecmascript-rest-spread) を使用して、次のように書くことができます: ``` js state.obj = { ...state.obj, newProp: 123 } diff --git a/docs/ja/guide/plugins.md b/docs/ja/guide/plugins.md index db4cf6f30..9ac7da452 100644 --- a/docs/ja/guide/plugins.md +++ b/docs/ja/guide/plugins.md @@ -25,7 +25,7 @@ const store = new Vuex.Store({ プラグインは直接、状態を変更できません。これはコンポーネントに似ています。プラグインはコンポーネント同様に、ミューテーションのコミットによる変更のトリガーだけで状態を変更できます。 -ミューテーションのコミットによるストアとデータソースの同期をプラグインで実現できます。 websocket データソースとストアを例にします (これは不自然な例です。実際には、さらに複雑なタスクのために `createPlugin` 関数は、追加でいくつかのオプションを受け取れます): +ミューテーションのコミットによるストアとデータソースの同期をプラグインで実現できます。 websocket データソースとストアを例にします (これは不自然な例です。実際には、さらに複雑なタスクのために `createWebSocketPlugin` 関数は、追加でいくつかのオプションを受け取れます): ``` js export default function createWebSocketPlugin (socket) {