javascript - 使用 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 是 user: {userName: "Mario", userAge:27} 谢谢

标签： javascriptvue.jssession-storage

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)
  }
}