v-snackbarをvuexに登録するとtimeout指定時にエラーになる

エラーメッセージ

Error: [vuex] do not mutate vuex store state outside mutation handlers.

原因

timeoutを設定しているとshowフラグがタイムアウト時にFALSEに変更される。

しかし、vuexのmutationsもしくはactionsを呼び出して書き換えているわけではないので上記のようなエラーが発生する。

対策

v-snackbarの属性値

// タイムアウトの設定値を-1にする
timeout="-1"

actions

// スナックバー表示の後、非表示用のmutationを呼ぶ
export const actions = {
  setSnackbar( { commit }, snackbar) {
    commit('SET_SNACKBAR', snackbar)
    // スナックバーを設定したあとのsetTimeout関数で非表示用のmutationを呼ぶ
    setTimeout(() => {
      commit('CLEAR_SNACKBAR')
    }, 4000);
  },
  clearSnackbar( { commit } ) {
    commit('CLEAR_SNACKBAR')
  }
}

参考