🤔
nuxtでログイン処理後の動的リンク作成
結論
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のイベントループで３回ほど発生しているイベントハンドラ？
まあどうやら非同期で動いてくれるみたい？
より詳しく知りたい方はこちらの記事を参考にされるといいかも？
あとがき
watchプロパティがあるのは知ってたんですけど、いまいち仕様がわからなくて使えなかったのですが、こんなに便利なものだとは、、、！
よきnuxtライフを〜〜✋
参考文献
Discussion