GettersとModules
派生状態を計算し、ストアをmodulesに整理します
「GettersとModules」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
ゲッターによる算出状態
フィルタリングされたリストや件数など、派生した状態が必要になることがあります。ゲッターはストアにおけるcomputedプロパティに相当し、状態から値を導出して、依存関係が変わるまで結果をキャッシュします。
ゲッターの定義
ゲッターは状態を受け取り、派生した値を返す関数です。
getters: {
completedTodos(state) {
return state.todos.filter(t => t.done)
}
}他のゲッターを使うゲッター
ゲッターは、すべての他のゲッターを含む2番目の引数を受け取るため、それらを組み合わせて使えます。
getters: {
completedTodos(state) {
return state.todos.filter(t => t.done)
},
completedCount(state, getters) {
return getters.completedTodos.length
}
}ゲッターへのアクセス
computedプロパティ内でthis.$store.gettersを通してゲッターを読み取ります。
computed: {
doneCount() {
return this.$store.getters.completedCount
}
}メソッド形式のゲッター
ゲッターから関数を返すと、引数を渡せます。メソッド形式のゲッターはキャッシュされず、呼び出すたびに実行される点に注意してください。
getters: {
todoById: (state) => (id) => {
return state.todos.find(t => t.id === id)
}
}
// usage
this.$store.getters.todoById(3)mapGettersヘルパー
mapStateと同様に、mapGettersヘルパーを使うとゲッターが自動的にcomputedプロパティになります。
import { mapGetters } from "vuex"
export default {
computed: {
...mapGetters(["completedTodos", "completedCount"])
}
}モジュールに分割する理由
1つの大きなストアは保守が難しくなります。Vuexではストアをモジュールに分割できます。各モジュールが独自の状態、ミューテーション、アクション、ゲッターを持つため、関連するロジックをまとめて管理できます。
モジュールの定義
モジュールは、ストアと同じオプションを持つオブジェクトにすぎません。modulesキーの下にモジュールを登録します。
const cart = {
state: () => ({ items: [] }),
mutations: {
addItem(state, item) { state.items.push(item) }
},
getters: {
itemCount: (state) => state.items.length
}
}モジュールの登録
ルートストアのmodulesの下にモジュールをまとめます。各キーがモジュール名になります。
import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"
export const store = createStore({
modules: { cart, user }
})モジュールの名前空間
namespaced: trueを設定すると、モジュールに独自のスコープを持たせられます。これによりモジュール間の名前の衝突を避け、構造を明確にできます。
const cart = {
namespaced: true,
state: () => ({ items: [] }),
getters: {
itemCount: (state) => state.items.length
}
}名前空間付きモジュールへのアクセス
名前空間を使用する場合は、ミューテーションのコミット、アクションのディスパッチ、ゲッターの読み取りの際にモジュール名をプレフィックスとして付けます。
// module state lives under the module key
this.$store.state.cart.items
// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")理解度チェック
ゲッターとモジュールについての理解度を確認しましょう。
まとめ
ゲッターは状態からキャッシュ可能な値を導出し、this.$store.gettersまたはmapGettersからアクセスします。モジュールは大きなストアを役割ごとの単位に分割します。namespaced: trueを設定するとスコープが分離され、module/nameというプレフィックスでメンバーを指定します。これで、状態、ミューテーション、アクション、ゲッター、モジュールというVuexの主要な機能をすべて学びました。
よくある質問
「GettersとModules」レッスンは無料ですか？
はい。「GettersとModules」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「GettersとModules」で何を学びますか？
派生状態を計算し、ストアをmodulesに整理します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「GettersとModules」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Vuexの基礎
- MutationsとActions
- GettersとModules