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!');
      }
    });
  },
}

App.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导入的内容。但是，loggedIn中的App.vue似乎不会对loggedIn中的index.js产生反应。

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

提前致谢！

Answer 1

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

由于auth.state.loggedIn包含基元（布尔值），因此将其值分配给data.loggedIn，只需将复制到data.loggedIn。

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

使这项工作的唯一方法是将整个state对象分配给您的数据：

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

  },

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

Vue.js变量未正确更新

1 个答案: