LoginSignup
6

More than 3 years have passed since last update.

vuex-persistedstateの値が復帰しない!?

Posted at

VuexのStateを永続化したい時は

vuexのstateの値を永続化したい。そこで使っていたのが、vuex-persistedstate

LocalStorageにstateの値を保持してくれる奴。使い方などは他の記事様などで詳しく書かれていると思うので、割愛させていただく。

問題

問題は、実際にリロードした時。stateに値があるかどうかで初期処理をしたい時に、stateの値を見ると…… undefindだった。
ん? これっていつvuexに反映されてるの?

答え

mounted()が実行された後。
え、mounted()って表示コンポーネントが揃った後に実行されるんじゃないの? mounted()が実行された後に戻ってくるということは、stateの値で判断して初期処理を変えたい時なんかはちょっと不便。

対処方法

mounted(){
  setTimeout(() => { // 反映されるのを待ってから実行
    // 初期処理
  }, 0)
}

まとめ

っていうだけの記事でした。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
6