File tree Expand file tree Collapse file tree 5 files changed +70
-26
lines changed Expand file tree Collapse file tree 5 files changed +70
-26
lines changed Original file line number Diff line number Diff line change 5
5
- [ ステート] ( state.md )
6
6
- [ ミューテーション] ( mutations.md )
7
7
- [ アクション] ( actions.md )
8
+ - [ ゲッター] ( getters.md )
8
9
- [ データフロー] ( data-flow.md )
9
10
- [ アプリケーションの構造] ( structure.md )
10
11
- [ ミドルウェア] ( middlewares.md )
Original file line number Diff line number Diff line change @@ -43,6 +43,19 @@ const store = new Vuex.Store({ ...options })
43
43
44
44
[ 詳細] ( actions.md )
45
45
46
+ - ** getters**
47
+
48
+ - 型: ` Object | Array<Object> `
49
+
50
+ 各エントリキーがゲッター名と第1引数としてステートを受信する関数の値であるオブジェクト
51
+
52
+ Vuex はそれらエントリを処理し、実際の呼び出し可能なゲッター関数と store の ` getters ` プロパティ上のそれらを公開する
53
+
54
+ オブジェクトの配列を渡す場合は、これらオブエジェクトは自動的に最後のオブジェクトにいっしょに自動的にマージされる
55
+
56
+ [ 詳細] ( getters.md )
57
+
58
+
46
59
- ** middlewares**
47
60
48
61
- 型: ` Array<Object> `
Original file line number Diff line number Diff line change @@ -8,6 +8,8 @@ Vuex Store を作成するために `Vuex.Store` コンストラクタを使用
8
8
9
9
- ** アクション** : ミューテーションをディスパッチする関数。アクションは非同期操作を含めることができ、複数のミューテーションをディスパッチすることができます
10
10
11
+ - ** ゲッター** : 算出された値を返すためにステートを受信する関数。Vue のコンポーネントから共有された算出関数抽出するのに便利です
12
+
11
13
どうして、状態を操作する単純な機能よりもむしろ、* ミューテーション* と* アクション* を区別したいのでしょうか?その理由は、** ミューテーションを分離したいのと非同期** のためです。多くの複雑なアプリケーションは 2 つの組合せから成り立ちます。分離すると、それら両方を調査することが容易になり、そしてそれらのためのテストを書くこともできます。
12
14
13
15
> Flux について精通している場合、ここでの用語/概念の違いがあることに注意してください。Vuex のアクションは Flux の** アクションクリエータ (action creators)** と同等でありますが、Vuex のミューテーションは Flux の ** アクション (actions)** に相当します。
@@ -24,8 +26,9 @@ import Vuex from 'vuex'
24
26
const store = new Vuex.Store ({
25
27
state: { ... },
26
28
actions: { ... },
27
- mutations: { ... }
29
+ mutations: { ... },
30
+ getters: { ... }
28
31
})
29
32
```
30
33
31
- 一度作成すると、ステートは ` store.state ` 経由、アクションは ` store.actions ` 経由でアクセスすることができます 。ミューテーション関数は直接アクセスすることはできません。ミューテーション関数は、アクションによるトリガされた時だけ、もしくは ` store.dispatch() ` を呼び出すときにアクセスできます。次の詳細で各概念について説明します。
34
+ 一度作成すると、ステートは ` store.state ` 経由、アクションは ` store.actions ` 、そして ` store.getters ` ゲッター経由でアクセスすることができます 。ミューテーション関数は直接アクセスすることはできません。ミューテーション関数は、アクションによるトリガされた時だけ、もしくは ` store.dispatch() ` を呼び出すときにアクセスできます。次の詳細で各概念について説明します。
Original file line number Diff line number Diff line change
1
+ # ゲッター
2
+
3
+ 複数のコンポーネントは、Vuex state に基づいて、同じ算出プロパティを必要とすることが可能です。算出プロパティのゲッターは単に関数で、store 経由で任意のコンポーネントで共有されることができるよう、別ファイルにそれらを分割することができます:
4
+
5
+ ``` js
6
+ import Vue from ' vue'
7
+ import Vuex from ' ../../../src'
8
+ import actions from ' ./actions'
9
+ import mutations from ' ./mutations'
10
+ import getters from ' ./getters'
11
+
12
+ Vue .use (Vuex)
13
+
14
+ export default new Vuex .Store ({
15
+ state: { /* ...*/ },
16
+ actions,
17
+ mutations,
18
+ getters
19
+ })
20
+ ```
21
+
22
+ ``` js
23
+ // getters.js
24
+ export function filteredTodos (state ) {
25
+ return state .messages .filter (message => {
26
+ return message .threadID === state .currentThreadID
27
+ })
28
+ }
29
+ ```
30
+
31
+ ``` js
32
+ // コンポーネントで ...
33
+ import { getters } from ' ./store'
34
+ const { filteredTodos } = getters
35
+
36
+ export default {
37
+ computed: {
38
+ filteredTodos
39
+ }
40
+ }
41
+ ```
42
+
43
+ 実際例として、[ ショッピングカートの例] ( https://github.com/vuejs/vuex/tree/master/examples/shopping-cart ) を確認してください。
44
+ ホットリロード API による実際の例として、[ ホットなカウンターの例] ( https://github.com/vuejs/vuex/tree/master/examples/counter-hot ) を確認してください。
45
+
46
+ これは [ NuclearJS のゲッター] ( https://optimizely.github.io/nuclear-js/docs/04-getters.html ) にとてもよく似ています。
Original file line number Diff line number Diff line change @@ -104,30 +104,11 @@ export default new Vuex.Store({
104
104
105
105
実際の例として、[ Shopping Cart Example] ( https://github.com/vuejs/vuex/tree/master/examples/shopping-cart ) を確認してください。
106
106
107
- ### 共有された算出プロパティ Getter の抽出
107
+ ### 共有された算出プロパティのゲッター抽出
108
108
109
- 大規模なプロジェクトでは、複数のコンポーネントが Vuex のステートに基づいて同じ算出プロパティ (computed property) を必要とする可能性があります。算出プロパティは単に関数であるため、それらが任意のコンポーネントで共有することができるように 、ファイルにそれらを分割することができます:
109
+ 大規模なプロジェクトでは、複数のコンポーネントが Vuex のステートに基づいて同じ算出プロパティ (computed property) を必要とする可能性があります。算出プロパティは単に関数であるため、それらが store 経由で任意のコンポーネントで共有することができるように 、ファイルにそれらを分割することができます:
110
110
111
- ``` js
112
- // getters.js
113
- import store from ' ./store'
114
-
115
- export function filteredTodos () {
116
- return store .state .messages .filter (message => {
117
- return message .threadID === store .state .currentThreadID
118
- })
119
- }
120
- ```
121
-
122
- ``` js
123
- // コンポーネントで...
124
- import { filteredTodos } from ' ./getters'
125
-
126
- export default {
127
- computed: {
128
- filteredTodos
129
- }
130
- }
131
- ```
111
+ 実際例として、[ ショッピングカートの例] ( https://github.com/vuejs/vuex/tree/master/examples/shopping-cart ) を確認してください。
112
+ ホットリロード API による実際の例として、[ ホットなカウンターの例] ( https://github.com/vuejs/vuex/tree/master/examples/counter-hot ) を確認してください。
132
113
133
- これはとても [ NuclearJS での Getter ] ( https://optimizely.github.io/nuclear-js/docs/04- getters.html ) と似ています 。
114
+ より詳細情報として、 [ ゲッターのドキュメント ] ( getters.md ) を確認してください 。
You can’t perform that action at this time.
0 commit comments