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 1
1
# Vuex とは何か?
2
2
3
+ <VideoPreview />
4
+
3
5
Vuex は Vue.js アプリケーションのための ** 状態管理パターン + ライブラリ** です。
4
6
これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
5
7
また 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 })
116
116
117
117
[詳細](../ guide/ strict .md )
118
118
119
+
120
+ ### devtools
121
+
122
+ - 型: ` Boolean`
123
+
124
+ 特定の Vuex インスタンスに対して開発ツールをオン、またはオフにします。インスタンスに false を渡すと、開発ツールのプラグインを購読しないように Vuex ストアに伝えます。1 ページに複数のストアがある場合に便利です。
125
+
126
+ ` ` ` js
127
+ {
128
+ devtools: false
129
+ }
130
+ ` ` `
131
+
119
132
## Vuex .Store インスタンスプロパティ
120
133
121
134
### state
@@ -156,7 +169,7 @@ const store = new Vuex.Store({ ...options })
156
169
157
170
- ** ` watch(fn: Function, callback: Function, options?: Object): Function` **
158
171
159
- ` fn` が返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。` fn` は最初の引数としてストアのステートを、2 番目の引数としてゲッターを受け取ります。 Vue の` vm.$watch` メソッドと同じオプションをオプションのオブジェクトとして受け付けます 。
172
+ ` fn` が返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。` fn` は最初の引数としてストアのステートを、2 番目の引数としてゲッターを受け取ります。 [ Vue の` vm.$watch` メソッド](https : // jp.vuejs.org/v2/api/#watch)と同じオプションをオプションのオブジェクトとして受け付けます 。
160
173
161
174
監視を止める場合は、返された unwatch 関数を呼び出します。
162
175
@@ -192,7 +205,24 @@ const store = new Vuex.Store({ ...options })
192
205
})
193
206
` ` `
194
207
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 )
196
226
197
227
### registerModule
198
228
Original file line number Diff line number Diff line change @@ -25,7 +25,7 @@ const store = new Vuex.Store({
25
25
})
26
26
```
27
27
28
- アクションハンドラはストアインスタンスのメソッドやプロパティのセットと同じものを呼び出せるコンテキストオブジェクトを受け取ります。したがって ` context.commit ` を呼び出すことでミューテーションをコミットできます。あるいは ` context.state ` や ` context.getters ` で、状態やゲッターにアクセスできます。なぜコンテキストオブジェクトがストアインスタンスそのものではないのかは、後ほど[ モジュール] ( modules.md ) で説明します。
28
+ アクションハンドラはストアインスタンスのメソッドやプロパティのセットと同じものを呼び出せるコンテキストオブジェクトを受け取ります。したがって ` context.commit ` を呼び出すことでミューテーションをコミットできます。あるいは ` context.state ` や ` context.getters ` で、状態やゲッターにアクセスできます。他のアクションも ` context.dispatch ` で呼ぶこともできます。 なぜコンテキストオブジェクトがストアインスタンスそのものではないのかは、後ほど[ モジュール] ( modules.md ) で説明します。
29
29
30
30
実際にはコードを少しシンプルにするために ES2015 の[ 引数分割束縛(argument destructuring)] ( https://github.com/lukehoban/es6features#destructuring ) がよく使われます(特に ` commit ` を複数回呼び出す必要があるとき):
31
31
Original file line number Diff line number Diff line change @@ -30,7 +30,7 @@ if (module.hot) {
30
30
// babel 6 のモジュール出力のため、ここでは .default を追加しなければならない
31
31
const newActions = require (' ./actions' ).default
32
32
const newMutations = require (' ./mutations' ).default
33
- // 新しいアクションとミューテーションにスワップ
33
+ // 新しいモジュールとミューテーションにスワップ
34
34
store .hotUpdate ({
35
35
mutations: newMutations,
36
36
modules: {
Original file line number Diff line number Diff line change @@ -88,7 +88,7 @@ Vuex ストアの状態は Vue によってリアクティブになっている
88
88
89
89
- ` Vue.set(obj, 'newProp', 123) ` を使用する。あるいは
90
90
91
- - 全く新しいオブジェクトで既存のオブジェクトを置き換える。例えば、stage-3 の [ スプレッドシンタックス(object spread syntax)] ( https://github.com/sebmarkbage/ecmascript-rest-spread ) を使用して、次のように書くことができます:
91
+ - 全く新しいオブジェクトで既存のオブジェクトを置き換える。例えば、[ スプレッドシンタックス(object spread syntax)] ( https://github.com/sebmarkbage/ecmascript-rest-spread ) を使用して、次のように書くことができます:
92
92
93
93
``` js
94
94
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({
25
25
26
26
プラグインは直接、状態を変更できません。これはコンポーネントに似ています。プラグインはコンポーネント同様に、ミューテーションのコミットによる変更のトリガーだけで状態を変更できます。
27
27
28
- ミューテーションのコミットによるストアとデータソースの同期をプラグインで実現できます。 websocket データソースとストアを例にします (これは不自然な例です。実際には、さらに複雑なタスクのために ` createPlugin ` 関数は、追加でいくつかのオプションを受け取れます):
28
+ ミューテーションのコミットによるストアとデータソースの同期をプラグインで実現できます。 websocket データソースとストアを例にします (これは不自然な例です。実際には、さらに複雑なタスクのために ` createWebSocketPlugin ` 関数は、追加でいくつかのオプションを受け取れます):
29
29
30
30
``` js
31
31
export default function createWebSocketPlugin (socket ) {
You can’t perform that action at this time.
0 commit comments