|
@@ -8,6 +8,8 @@ Vuex Store を作成するために `Vuex.Store` コンストラクタを使用
|
|
|
|
|
|
- **アクション**: ミューテーションをディスパッチする関数。アクションは非同期操作を含めることができ、複数のミューテーションをディスパッチすることができます
|
|
- **アクション**: ミューテーションをディスパッチする関数。アクションは非同期操作を含めることができ、複数のミューテーションをディスパッチすることができます
|
|
|
|
|
|
|
|
+- **ゲッター**: 算出された値を返すためにステートを受信する関数。Vue のコンポーネントから共有された算出関数抽出するのに便利です
|
|
|
|
+
|
|
どうして、状態を操作する単純な機能よりもむしろ、*ミューテーション*と*アクション*を区別したいのでしょうか?その理由は、**ミューテーションを分離したいのと非同期**のためです。多くの複雑なアプリケーションは 2 つの組合せから成り立ちます。分離すると、それら両方を調査することが容易になり、そしてそれらのためのテストを書くこともできます。
|
|
どうして、状態を操作する単純な機能よりもむしろ、*ミューテーション*と*アクション*を区別したいのでしょうか?その理由は、**ミューテーションを分離したいのと非同期**のためです。多くの複雑なアプリケーションは 2 つの組合せから成り立ちます。分離すると、それら両方を調査することが容易になり、そしてそれらのためのテストを書くこともできます。
|
|
|
|
|
|
> Flux について精通している場合、ここでの用語/概念の違いがあることに注意してください。Vuex のアクションは Flux の**アクションクリエータ (action creators)** と同等でありますが、Vuex のミューテーションは Flux の **アクション (actions)** に相当します。
|
|
> Flux について精通している場合、ここでの用語/概念の違いがあることに注意してください。Vuex のアクションは Flux の**アクションクリエータ (action creators)** と同等でありますが、Vuex のミューテーションは Flux の **アクション (actions)** に相当します。
|
|
@@ -24,8 +26,9 @@ import Vuex from 'vuex'
|
|
const store = new Vuex.Store({
|
|
const store = new Vuex.Store({
|
|
state: { ... },
|
|
state: { ... },
|
|
actions: { ... },
|
|
actions: { ... },
|
|
- mutations: { ... }
|
|
|
|
|
|
+ mutations: { ... },
|
|
|
|
+ getters: { ... }
|
|
})
|
|
})
|
|
```
|
|
```
|
|
|
|
|
|
-一度作成すると、ステートは `store.state` 経由、アクションは `store.actions` 経由でアクセスすることができます。ミューテーション関数は直接アクセスすることはできません。ミューテーション関数は、アクションによるトリガされた時だけ、もしくは `store.dispatch()` を呼び出すときにアクセスできます。次の詳細で各概念について説明します。
|
|
|
|
|
|
+一度作成すると、ステートは `store.state` 経由、アクションは `store.actions` 、そして `store.getters` ゲッター経由でアクセスすることができます。ミューテーション関数は直接アクセスすることはできません。ミューテーション関数は、アクションによるトリガされた時だけ、もしくは `store.dispatch()` を呼び出すときにアクセスできます。次の詳細で各概念について説明します。
|