File tree Expand file tree Collapse file tree 6 files changed +38
-6
lines changed Expand file tree Collapse file tree 6 files changed +38
-6
lines changed Original file line number Diff line number Diff line change 11# Vuex とは何か?
22
3+ <VideoPreview />
4+
35Vuex は Vue.js アプリケーションのための ** 状態管理パターン + ライブラリ** です。
46これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
57また Vue 公式の[ 開発ツール拡張] ( https://github.com/vuejs/vue-devtools ) と連携し、設定なしでタイムトラベルデバッグやステートのスナップショットのエクスポートやインポートのような高度な機能を提供します。
Original file line number Diff line number Diff line change @@ -116,6 +116,19 @@ const store = new Vuex.Store({ ...options })
116116
117117 [詳細](../ guide/ strict .md )
118118
119+
120+ ### devtools
121+
122+ - 型: ` Boolean`
123+
124+ 特定の Vuex インスタンスに対して開発ツールをオン、またはオフにします。インスタンスに false を渡すと、開発ツールのプラグインを購読しないように Vuex ストアに伝えます。1 ページに複数のストアがある場合に便利です。
125+
126+ ` ` ` js
127+ {
128+ devtools: false
129+ }
130+ ` ` `
131+
119132## Vuex .Store インスタンスプロパティ
120133
121134### state
@@ -156,7 +169,7 @@ const store = new Vuex.Store({ ...options })
156169
157170- ** ` watch(fn: Function, callback: Function, options?: Object): Function` **
158171
159- ` fn` が返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。` fn` は最初の引数としてストアのステートを、2 番目の引数としてゲッターを受け取ります。 Vue の` vm.$watch` メソッドと同じオプションをオプションのオブジェクトとして受け付けます 。
172+ ` fn` が返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。` fn` は最初の引数としてストアのステートを、2 番目の引数としてゲッターを受け取ります。 [ Vue の` vm.$watch` メソッド](https : // jp.vuejs.org/v2/api/#watch)と同じオプションをオプションのオブジェクトとして受け付けます 。
160173
161174 監視を止める場合は、返された unwatch 関数を呼び出します。
162175
@@ -192,7 +205,24 @@ const store = new Vuex.Store({ ...options })
192205 })
193206 ` ` `
194207
195- プラグインで最も一般的に使用されます。[Details](../ guide/ plugins .md )
208+ 購読を停止するには、返された購読解除関数を呼びます。
209+
210+ > 3.1 .0 で新規追加
211+
212+ 3.1 .0 から、` subscribeAction` は購読ハンドラがアクションディスパッチの* 前 (before)* 、または* 後 (after)* に呼びだすべきかどうか(デフォルトの動作は、* before* です)指定することもできます。
213+
214+ ` ` ` js
215+ store.subscribeAction({
216+ before: (action, state) => {
217+ console.log(` before action ${action .type }` )
218+ },
219+ after: (action, state) => {
220+ console.log(` after action ${action .type }` )
221+ }
222+ })
223+ ` ` `
224+
225+ プラグインで最も一般的に使用されます。[詳細](../ guide/ plugins .md )
196226
197227### registerModule
198228
Original file line number Diff line number Diff line change @@ -25,7 +25,7 @@ const store = new Vuex.Store({
2525})
2626```
2727
28- アクションハンドラはストアインスタンスのメソッドやプロパティのセットと同じものを呼び出せるコンテキストオブジェクトを受け取ります。したがって ` context.commit ` を呼び出すことでミューテーションをコミットできます。あるいは ` context.state ` や ` context.getters ` で、状態やゲッターにアクセスできます。なぜコンテキストオブジェクトがストアインスタンスそのものではないのかは、後ほど[ モジュール] ( modules.md ) で説明します。
28+ アクションハンドラはストアインスタンスのメソッドやプロパティのセットと同じものを呼び出せるコンテキストオブジェクトを受け取ります。したがって ` context.commit ` を呼び出すことでミューテーションをコミットできます。あるいは ` context.state ` や ` context.getters ` で、状態やゲッターにアクセスできます。他のアクションも ` context.dispatch ` で呼ぶこともできます。 なぜコンテキストオブジェクトがストアインスタンスそのものではないのかは、後ほど[ モジュール] ( modules.md ) で説明します。
2929
3030実際にはコードを少しシンプルにするために ES2015 の[ 引数分割束縛(argument destructuring)] ( https://github.com/lukehoban/es6features#destructuring ) がよく使われます(特に ` commit ` を複数回呼び出す必要があるとき):
3131
Original file line number Diff line number Diff line change @@ -30,7 +30,7 @@ if (module.hot) {
3030 // babel 6 のモジュール出力のため、ここでは .default を追加しなければならない
3131 const newActions = require (' ./actions' ).default
3232 const newMutations = require (' ./mutations' ).default
33- // 新しいアクションとミューテーションにスワップ
33+ // 新しいモジュールとミューテーションにスワップ
3434 store .hotUpdate ({
3535 mutations: newMutations,
3636 modules: {
Original file line number Diff line number Diff line change @@ -88,7 +88,7 @@ Vuex ストアの状態は Vue によってリアクティブになっている
8888
8989 - ` Vue.set(obj, 'newProp', 123) ` を使用する。あるいは
9090
91- - 全く新しいオブジェクトで既存のオブジェクトを置き換える。例えば、stage-3 の [ スプレッドシンタックス(object spread syntax)] ( https://github.com/sebmarkbage/ecmascript-rest-spread ) を使用して、次のように書くことができます:
91+ - 全く新しいオブジェクトで既存のオブジェクトを置き換える。例えば、[ スプレッドシンタックス(object spread syntax)] ( https://github.com/sebmarkbage/ecmascript-rest-spread ) を使用して、次のように書くことができます:
9292
9393 ``` js
9494 state .obj = { ... state .obj , newProp: 123 }
Original file line number Diff line number Diff line change @@ -25,7 +25,7 @@ const store = new Vuex.Store({
2525
2626プラグインは直接、状態を変更できません。これはコンポーネントに似ています。プラグインはコンポーネント同様に、ミューテーションのコミットによる変更のトリガーだけで状態を変更できます。
2727
28- ミューテーションのコミットによるストアとデータソースの同期をプラグインで実現できます。 websocket データソースとストアを例にします (これは不自然な例です。実際には、さらに複雑なタスクのために ` createPlugin ` 関数は、追加でいくつかのオプションを受け取れます):
28+ ミューテーションのコミットによるストアとデータソースの同期をプラグインで実現できます。 websocket データソースとストアを例にします (これは不自然な例です。実際には、さらに複雑なタスクのために ` createWebSocketPlugin ` 関数は、追加でいくつかのオプションを受け取れます):
2929
3030``` js
3131export default function createWebSocketPlugin (socket ) {
You can’t perform that action at this time.
0 commit comments