vue.jsの状態/ UIの変化を監視する方法

Question

UIの状態の変化を監視する方法はありますか？

たとえば、私のデータコンポーネントには、loggedInという変数があります。 loggedInの値がfalseの場合、私のヘッダーにLoginというリンクを表示します。同様に、loggedInの値がtrueの場合は、私のヘッダーにLogoutのリンクを表示します。これまでのところ、私は試してみました。

<li v-if="loggedIn"><a v-link="{ path: 'login' }" v-on:click="logout()">Logout</a></li> 
<li v-else><a v-link="{ path: 'login' }">Login</a></li> 


data: function() { 

    return { 
     loggedIn: this.isLoggedIn() //this method returns true/false 
    } 

}, 

コードには、望ましい効果があります。ただし、コンポーネントがリフレッシュされている場合にのみ機能します。私はloggedInの値が変更されたときにLogin/Logoutをレンダリングしたいと思います...誰かが助けることができますか？

ありがとうございます！

Answer 1

更新this.isLoggedInは、コンポーネント内のメソッドであり、その外にはありません。 isLoggedInをcomputedとし、それをあなたの指示に使用する必要があります。

はい、は、UIの状態の変更を監視できますが、Vueでは変更できません。 Vueは、UI全体が存在することを知らない。それはあなたがそれについて伝える部分だけを知っています（通常、ディレクティブ経由で）。

例のコードでは、loggedInを関数の出力に初期化しますが、初期化後はその値は決して変更されません。 ViewModelの外にあるものには$watchはありません。

おそらく、UIの状態が変化するログインプロセスがあります。 ViewModelの目的はアプリケーションをモデル化することであるため、 ログインプロセスをViewModelにmethodとして実装する必要があります。変数のloggedInの値を変更することができます。一般的なルールとして、UI状態はdataのメンバーで表され、UI状態を変更するものはmethodとして実装される必要があります。

ログインは、このコンポーネントから親ツリーになる可能性があります。その場合、loggedInはpropとして入力する必要があります。