基礎からメモ： Vue.js CH8-p278 その他の機能やオプション

ストアの状態監視

Vuexで定義されたアプリケーションレベルのウォッチャは、コンポーネントより先に呼び出される。

const store = new Vuex.store({ ... })
const unwatch = store.watch(
  (state, getters) => {
    return state.count // 監視したいデータを返す
  },
  (newVal, oldVal) => {
    // 処理
  }
)

ミューテーションやアクションの呼び出し時にフックして、何らかの処理をすることができる。

// コミットにフック
store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})
// ディスパッチにフック
store.subscribeAction((action, state) => {
  console.log(action.type)
  console.log(action.payload)
})

Strictモードの有効化

開発時にStrictモードを有効化して、タイプミスなどを防ぐ。

const store = new Vuex.Store({
    strict: true,
    ......
})

運用時にはStrictモードを外せるように環境変数で切り替える形にしておく。

const store = new Vuex.Store({
    strict: process.env.NODE_ENV != 'production',
    ......
})

Vuexでホットリロード

デフォルトではVuexの定義ファイルはホットリロードを使えないので、store.hotUpdate()APIメソッドで設定する。

また、Vuex.Storeコンストラクタを使っているファイルはホットリロードできない。ミューテーション、アクション、モジュールを別ファイルにして対応する。

if (module.hot) {
  module.hot.accept(['@/store/myModule.js'], () => {
    // 更新されたモジュールを読み込む
    const myModule = require('@/store/myModule.js').default
    // 新しい定義をセット
    store.hotUpdate({
      modules: {
        myModule: myModule
      }
    })
  })
}