javascript - Vue.js 变量未正确更新

Question

我在 vue.js 中遇到变量问题。

场景 - 当用户登录时，我想将 loggedIn 变量设置为 true 并在用户登录时将其设置为 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!');
      }
    });
  },
}

应用程序.vue:

import auth from './index.js';

module.exports = {

  data: function () {

    return {

      loggedIn: auth.state.loggedIn,
    }

  },

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

}

如您所见，在 App.vue 中，我的 loggedIn 变量取决于从 index.js 导入的内容。但是，App.vue 中的 loggedIn 似乎并没有对 index.js 中的 loggedIn 使用react。

有人知道我可能做错了什么吗？

提前致谢!

Answer 1

为了使某些数据具有反应性，您必须将其设置为组件的data。

由于 auth.state.loggedIn 持有一个原语( bool 值)，因此将其值分配给 data.loggedIn 只需将其复制到data.loggedIn。

因此，虽然 data.loggedIn 是 react 性的，但 auth.state.loggedIn 却不是。这两者根本就没有联系。

<小时/>

实现此目的的唯一方法是将整个 state 对象分配给您的数据:

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

  },

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