使用vue.js存储对象的元素

Question

    data() {
        return: {
          user: {},
          userName: "",
          userAge: ""
    }
  },

methods: {

    saveUserName: function() {
          this.userName = this.newUserName;
          this.$refs.userNameModal.hideModal();
          this.$session.set('userDetails', {userName: this.userName});
        },

    saveUserAge: function() {
          this.userAge = this.newUserAge;
          this.$refs.userAgeModal.hideModal();
          this.$session.set('userDetails', {userAge: this.userAge});
        },

    },

    beforeMount: function() {
    if (this.$session.exists('userDetails')) {

          this.user = this.$session.get('userDetails');
          console.log("userDetails", this.user)
        }

    }

我有一个用户窗体，对于每个条目，都会弹出一个模态，并且需要用户填写，然后通过按下完成按钮，模态会关闭，并调用特定的函数（即saveUserName（）），该模态，并将其设置为会话存储。 所以我想知道如何按时间填充用户对象，并将这些值设置到会话存储中？ 到目前为止，第一个值被重置，第二个值被接管，在我的情况下，我的用户对象具有userName或userAge。 我所期望的（在我的会话存储不为空的情况下）来自日志beforeMount是用户：{userName：“ Mario”，userAge：27}谢谢

Answer 1

data() {
  return {
    user: {
      userName: "",
      userAge: ""
    },
  };
},

methods: {
  saveUserName: function() {
    this.user.userName = this.newUserName;
    this.$refs.userNameModal.hideModal();
    this.saveUser();
  },

  saveUserAge: function() {
    this.user.userAge = this.newUserAge;
    this.$refs.userAgeModal.hideModal();
    this.saveUser();
  },

  saveUser: function() {
    this.$session.set('userDetails', this.user);
  },
},

beforeMount: function() {
  if (this.$session.exists('userDetails')) {
    this.user = this.$session.get('userDetails');
    console.log("userDetails", this.user)
  }
}