Nuxt.js vuex モジュールモードでのgettersの使用方法

忘れそうなので覚書を。

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と同じようにハッシュキーを指定する形で呼びだすようですね。

参考リンク