Как связать данные, полученные из store?

Question

[Rufix]

Привет, передо мной такая задача: делаю страницу с настройками профиля.
Есть блока "Profile settings" в котором инпуты, для примера возьмем поля "First name" и "Last name".
В store у меня хранится объект, в котором вся нужная мне информация об авторизованном пользователе.
Мне нужно взять из store эту информацию, создать в data соответствующие поля, например firstName и lastName для привязки с инпутами.
Сложность заключается в том, чтобы отобразить текущие данные пользователя в этих полях, при этом сделать привязку.

Что я имею:
- получаю currentUser() в computed свойствах путем обращение к this.$store.getters.getCurrentUser
- объект data, в котором созданы 2 поля: firstName: "" и lastName: ""
- 2 инпута с v-model="firstName" и "lastName" соответственно

Пытался в data задать значение this.currentUser.first_name из computed, но к вычисляемым свойствам мы не имеем доступа из data.

Answer 1

[Andrey Vasilev]

используй get и set в computed св-ве.
я думаю это будет то, что тебе нужно

computed: {
  fullName: {
    // геттер:
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // сеттер:
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

Answer 2

[Gimir]

Пропиши присвоение в mounted(), и все будет нормально

Comments

[Rufix]

https://imgur.com/a/PJiAssk

[Gimir]

Что в консоли выводит?

Answer 3

[Алексей Ярков]

mounted() {
    this.userName = this.currentUser.userName;
}

Comments

[Rufix]

https://imgur.com/a/PJiAssk

[Алексей Ярков]

Rufix, и? Деструктуризация?

[Rufix]

Алексей Ярков, Данные в firstName не внеслись, поле инпута пустое. Буду признателен, если поможете)

[Rufix]

Алексей Ярков, Привязка работает с пустым полем firstName