🤔

nuxtでログイン処理後の動的リンク作成

1 min read

結論

watchを使用してstoreのloginを監視して変更があった段階でリンクを書き換える。

具体的に

computed: {
    islogin(){
      return this.$store.state.login.islogin
    }
  },
  watch: {
    islogin() {
      this.$nextTick(() => {
        this.items[0].link = `/${this.islogin.id}/top`;
        this.items[4].link = `/${this.islogin.id}/logout`;
      })
      
    }
  },

computedで呼び出したislogin(JSON形式でデータだ格納されている)のデータをwatchを使用して監視する。
値に変更があった(ログインに成功)した場合、今回の処理ではitems配列の中のlinkを上記のように書き換える処理をしている。

What is this.$nextTick??

これに関しては正直いまいち掴めませんでしたが、ニュアンスとしてはNodeのイベントループで3回ほど発生しているイベントハンドラ?
まあどうやら非同期で動いてくれるみたい?
より詳しく知りたい方はこちらの記事を参考にされるといいかも?

https://www.slideshare.net/shigeki_ohtsu/processnext-tick-nodejs

あとがき

watchプロパティがあるのは知ってたんですけど、いまいち仕様がわからなくて使えなかったのですが、こんなに便利なものだとは、、、!

よきnuxtライフを〜〜✋

https://twitter.com/ryuji_vlog

https://github.com/ryuji-cre8ive

参考文献

https://ti-tomo-knowledge.hatenablog.com/entry/2019/02/21/100803

Discussion

ログインするとコメントできます