忘れそうなので覚書を。
gettersとは
要は、vuexのstateを取得する際のゲッターメソッドです。
#クラシックモードでの使用方法
まずはstoreの定義です。
store/hoge.js
const store = () => new Vuex.Store({
state: {
hoge: null
},
getters: {
isHogeExist (state) {
return !!state.hoge
}
}
)
次に使用する側です。(抜粋)
pages/index.vue
<v-btn to="/hogehoge" v-show="$store.getters.isHogeExist">ほげ</v-btn>
#モジュールモードでの使用方法
同じようにstoreの定義
store/hoge.js
export const state = () => ({
hoge: null
}
export const getters = {
isHogeExist (state) {
return !!state.hoge
}
}
使用するとき
pages/index.vue
<v-btn to="/hogehoge" v-show="$store.getters['hoge/isHogeExist']">ほげ</v-btn>
mutationと同じようにハッシュキーを指定する形で呼びだすようですね。