File tree Expand file tree Collapse file tree 8 files changed +14
-14
lines changed Expand file tree Collapse file tree 8 files changed +14
-14
lines changed Original file line number Diff line number Diff line change 1
1
# Table of Contents
2
2
3
3
- [ Vuex は何ですか?] ( intro.md )
4
- - [ コアコンセプト ] ( concepts.md )
4
+ - [ 中核概念 ] ( concepts.md )
5
5
- [ ステート] ( state.md )
6
6
- [ ミューテーション] ( mutations.md )
7
7
- [ アクション] ( actions.md )
8
8
- [ データフロー] ( data-flow.md )
9
9
- [ アプリケーションの構造] ( structure.md )
10
10
- [ ミドルウェア] ( middlewares.md )
11
- - [ Strict Mode ] ( strict.md )
11
+ - [ 厳格モード ] ( strict.md )
12
12
- [ フォームのハンドリング] ( forms.md )
13
13
- [ テスト] ( testing.md )
14
14
- [ ホットリローディング] ( hot-reload.md )
Original file line number Diff line number Diff line change @@ -64,7 +64,7 @@ const store = new Vuex.Store({ ...options })
64
64
- 型: ` Boolean`
65
65
- デフォルト値: ` false`
66
66
67
- Vuex store を strict mode に強制する。strict mode ではミューテーションハンドラの外側の Vuex ステートに任意に変異するとき、エラーを投げる
67
+ Vuex store を 厳格モードに強制する。厳格モードではミューテーションハンドラの外側の Vuex ステートに任意に変異するとき、エラーを投げる
68
68
69
69
[詳細](strict .md )
70
70
Original file line number Diff line number Diff line change 1
- # コアコンセプト
1
+ # 中核概念
2
2
3
3
Vuex Store を作成するために ` Vuex.Store ` コンストラクタを使用できます。ほとんどの場合、各アプリケーション毎に単独の store だけが必要になります。各 Vuex Store は 3 種類の "構成要素" からなります:
4
4
Original file line number Diff line number Diff line change 1
1
# フォームのハンドリング
2
2
3
- strict mode で Vuex を使用するとき、Vuex に属するステートの一部において ` v-model ` を使用するためには少しトリッキーです:
3
+ 厳格モードで Vuex を使用するとき、Vuex に属するステートの一部において ` v-model ` を使用するためには少しトリッキーです:
4
4
5
5
``` html
6
6
<input v-model =" obj.message" >
7
7
```
8
8
9
- ` obj ` が store からオブジェクトを返す算出プロパティ (computed property) と仮定すると、` v-model ` はここでは、input でユーザーがタイプするとき、直接 ` obj.message ` を変異させようとします。strict mode において 、ミューテーションは明示的に Vuex のミューテーションハンドラ内部で処理されていないため、エラーを投げます。
9
+ ` obj ` が store からオブジェクトを返す算出プロパティ (computed property) と仮定すると、` v-model ` はここでは、input でユーザーがタイプするとき、直接 ` obj.message ` を変異させようとします。厳格モードにおいて 、ミューテーションは明示的に Vuex のミューテーションハンドラ内部で処理されていないため、エラーを投げます。
10
10
11
11
それに対処するための "Vuex way" は、` <input> ` の値をバインディングし、そして ` input ` または ` change ` イベントでアクションを呼び出します:
12
12
Original file line number Diff line number Diff line change 1
- ## vuex は何ですか?
1
+ ## Vuex は何ですか?
2
2
3
- Vuex は Vue.js アプリケーションで集中状態管理するためのアプリケーションアーキテクチャです。[ Flux] ( https://facebook.github.io/flux/ ) や [ Redux] ( https://github.com/rackt/redux ) からインスピレーションを得ていますが、 簡易化されたコンセプト 、そして Vue.js リアクティブシステムの長所を得るために、特別に設計された実装になっています。
3
+ Vuex は Vue.js アプリケーションで集中状態管理するためのアプリケーションアーキテクチャです。[ Flux] ( https://facebook.github.io/flux/ ) や [ Redux] ( https://github.com/rackt/redux ) からインスピレーションを得ていますが、 簡易化された概念 、そして Vue.js リアクティブシステムの長所を得るために、特別に設計された実装になっています。
4
4
5
5
## なぜこれを必要とするのですか?
6
6
Original file line number Diff line number Diff line change @@ -62,7 +62,7 @@ Vuex store のステートは Vue によってリアクティブになってい
62
62
63
63
### ミューテーション名に対して定数を使用
64
64
65
- ミューテーション名には定数を使用することが一般的です。コードに対して linter のようなツールの長所を利用することができ 、そして、単一ファイルに全ての定数を設定することは、あなたの協力者にミューテーションがアプリケーション全体で可能であるかが一目見ただけで理解できるビューを得ることができます:
65
+ ミューテーション名には定数を使用することが一般的です。コードに対してリンタのようなツールの長所を利用することができ 、そして、単一ファイルに全ての定数を設定することは、あなたの協力者にミューテーションがアプリケーション全体で可能であるかが一目見ただけで理解できるビューを得ることができます:
66
66
67
67
``` js
68
68
// mutation-types.js
Original file line number Diff line number Diff line change @@ -46,6 +46,6 @@ export default {
46
46
47
47
読み取り専用の算出プロパティを使用すると、** コンポーネントは直接 Vuex store のステートを変異させるべきではない** というルールを強調するのを援助するという別の利点を持っています。全てのステートのミューテーションを明示的および追跡可能にしたいため、全ての vuex store のミューテーションは store のミューテーションハンドラ内部で行われければなりません。
48
48
49
- このルールを強制するのを援助するために、[ Strict Mode ] ( strict.md ) で store のステートがミューテーションハンドラの外部で変異された場合は、Vuex はエラーを投げます。
49
+ このルールを強制するのを援助するために、[ 厳格モード ] ( strict.md ) で store のステートがミューテーションハンドラの外部で変異された場合は、Vuex はエラーを投げます。
50
50
51
51
代わりにこのルールでは、私達の Vue コンポーネントははるかに少ない責務で済みます。読み取り専用の算出プロパティを介して Vuex store のステートにバインドされており、ステートに影響を与えるための唯一の方法は、** アクション** によって呼び出され、順番に** ミューテーション** をトリガすることです。必要であれば、まだ所有しローカルステートに操作できますが、もはや個々のコンポーネント内部には、任意のデータフェッチまたはグローバルステートミューテーティングロジックを入れていません。
Original file line number Diff line number Diff line change 1
- # Strict Mode
1
+ # 厳格モード
2
2
3
- strict mode を有効にするには 、Vuex store を作成するときに、単純に ` strict: true ` を指定します:
3
+ 厳格モードを有効にするには 、Vuex store を作成するときに、単純に ` strict: true ` を指定します:
4
4
5
5
``` js
6
6
const store = new Vuex.Store ({
@@ -9,11 +9,11 @@ const store = new Vuex.Store({
9
9
})
10
10
```
11
11
12
- strict mode では 、Vuex のステートがミューテーションハンドラの外部で変異されたときはいつでも、エラーを投げます。これは全てのステートの変異がデバッギングツールによって明示的に追跡dけいるようになります。
12
+ 厳格モードでは 、Vuex のステートがミューテーションハンドラの外部で変異されたときはいつでも、エラーを投げます。これは全てのステートの変異がデバッギングツールによって明示的に追跡dけいるようになります。
13
13
14
14
### 開発環境 vs 本番環境
15
15
16
- ** 本番環境に対して strict mode を有効にしてデプロイしてはなりません !** Strict mode では不適切なミューテーションを検出するためにステートツリー上で深い監視を実行します 。パフォーマンスコストを回避するために本番環境ではそれをオフにしてください。
16
+ ** 本番環境に対して 厳格モードを有効にしてデプロイしてはなりません !** 厳格モードでは不適切なミューテーションを検出するためにステートツリー上で深い監視を実行します 。パフォーマンスコストを回避するために本番環境ではそれをオフにしてください。
17
17
18
18
ミドルウェアと同様に、ビルドツールに処理させることができます:
19
19
You can’t perform that action at this time.
0 commit comments