まず、Vuexのセットアップが完了していると仮定します。Vuexストアを作成し、Vuexモジュールを定義する必要があります。以下に、Vuexゲッターとルートステートの使用方法について詳しく説明します。
- ゲッター (Getter): ゲッターは、Vuexストアの状態を取得するための関数です。ゲッターを定義することで、複雑な計算やフィルタリングを行いながらステートを取得することができます。ゲッターは、他のゲッターやコンポーネントから簡単に再利用することもできます。
以下は、ゲッターの例です。
// Vuexストアの定義
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: 'Task 1', completed: false },
{ id: 2, text: 'Task 2', completed: true },
{ id: 3, text: 'Task 3', completed: false }
]
},
getters: {
completedTodos: state => {
return state.todos.filter(todo => todo.completed)
},
incompleteTodos: state => {
return state.todos.filter(todo => !todo.completed)
}
}
})
// ゲッターの使用例
console.log(store.getters.completedTodos) // 完了したタスクの配列を取得
console.log(store.getters.incompleteTodos) // 未完了のタスクの配列を取得- ルートステート (Root State): ルートステートは、Vuexストアのルートモジュールで定義されたステートのことです。ルートステートには、アプリケーション全体で共有されるデータを格納します。ルートステートに直接アクセスするには、ルートゲッターを使用します。
以下は、ルートステートの使用例です。
// Vuexストアの定義
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
getters: {
getCount: state => {
return state.count
}
}
})
// ルートステートへのアクセス
console.log(store.state.count) // ルートステートの値を取得
// ルートゲッターの使用
console.log(store.getters.getCount) // ルートステートの値をゲッター経由で取得以上が、Vuexのゲッターとルートステートの使用方法の解説です。これらの機能を活用することで、Vuexを効果的に使いこなすことができます。