Vue.js変数が正しく更新されない

Question

vue.jsの変数に問題があります。

シナリオ - ユーザがログインするときに、に変数loggedInを設定し、ユーザがログアウトしたときにfalseに設定する必要があります。私のコード：

index.js：

export default { 

    state: { 
    loggedIn : false 
    }, 

    login() { 
    var self = this; 
    var creds = { 
     username: 'username', 
     password: 'password' 
    } 

    $.ajax({ 
     url: '/login', 
     type: 'POST', 
     data: creds, 
     success: function(response) { 
     self.state.loggedIn = true; 
     alert('Logged in!!'); 
     }, 
     error: function() { 
     alert('Error logging in!'); 
     } 
    }); 
    }, 
} 

App.vue：あなたはApp.vueで、見ることができるように

import auth from './index.js'; 

module.exports = { 

    data: function() { 

    return { 

     loggedIn: auth.state.loggedIn, 
    } 

    }, 

    watch: { 
    loggedIn: function() { 
     alert('loggedIn value has changed!!!'); 
    } 
    }, 

} 

、私loggedIn変数がindex.jsから輸入しているものに依存します。しかし、App.vueのloggedInは、loggedInに反応して、index.jsには現れません。

誰かが私が間違っているかもしれないことを知っていますか？

ありがとうございます！

Answer 1

一部のデータをリアクティブにするには、コンポーネントのdataとして設定する必要があります。 auth.state.loggedInので

はdata.loggedIn単にコピーdata.loggedInにそれを上にその値を割り当てること、プリミティブ（ブール値）を保持します。

したがって、data.loggedInは、であり、auth.state.loggedInではありません。 2人は単に決して結びついていない。

---

この作品を作るための唯一の方法は、あなたのデータに全体stateオブジェクトを割り当てることです：

module.exports = { 
    data() { 
    return { 
     auth: auth.state, 
    } 

    }, 

    watch: { 
    'auth.loggedIn'() { 
     alert('loggedIn value has changed!!!'); 
    } 
    } 
};