Как установить начальные значения для данных из vuex?

Question

Моя цель - создать форму «Изменить учетную запись», чтобы пользователь мог изменять данные своей учетной записи. Я хочу представить данные учетной записи в форме, которая уже заполнена данными пользователя, т. Е. Имя пользователя, адрес электронной почты, адрес ...

Пользователь может затем изменить данные в форме и отправить эту форму, которая обновит их информацию о пользователе.

Я использую v-модель для привязки ввода формы к объекту с именем accountInfo в моих данных, который выглядит следующим образом:

data() {
    return {
        accountInfo: {
                firstName: ''
        }
    }
}

А вот пример ввода формы в моем шаблоне:

<input v-model.trim="accountInfo.firstName" type="text" class="form-control" id="first-name" />

Значения для ключей в объекте в настоящее время являются пустыми строками, но я бы хотел, чтобы значения поступали от объекта с именем userProfile , который является свойством состояния в vuex.

В моем компоненте «Изменить учетную запись» я сопоставляю состояние vuex путем импорта:

import { mapState } from "vuex";

затем используя следующее в вычисляемом свойстве

computed: {
    ...mapState(["userProfile"])
}

То, что я хотел бы сделать, это вместо того, чтобы иметь пустые строки в качестве значений accountInfo, присваивать им значения из вычисляемого свойства userProfile, сопоставленного с vuex, следующим образом:

data() {
        return {
            accountInfo: {
                    firstName: this.userProfile.fristName,
            }
        }
    }

Это обеспечит требуемые исходные данные для моей формы, но, к сожалению, это не сработает, предположительно потому, что данные отображаются в более раннем жизненном цикле, чем вычисленные свойства.

Полный код:

EditAccount.vue

<template>
    <div class="container-fluid">
        <form id="sign_up_form" @submit.prevent>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input v-model.trim="signupForm.firstName" type="text" class="form-control" id="first_name" />
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import { mapState } from "vuex";
import SideBar from "../common/SideBar.vue";

export default {
  name: "EditAccount",
  computed: {
    ...mapState(["userProfile"])
  },
  data() {
    return {
      accountInfo: {
        firstName: this.userProfile.firstName
      }
    };
  }
};
</script>

store.js:

export const store = new Vuex.Store({
    state: {
        userProfile: {firstName: "Oamar", lastName: "Kanji"}
    }
});

Answer 1

Свяжите свой ввод с V-моделью, как вы были:

<div id="app">
    <input type="text" v-model="firstName">
</div>

Используйте установленный крюк жизненного цикла, чтобы установить начальное значение:

import Vue from 'vue';
import { mapGetters } from 'vuex';

new Vue({
      el: "#app",
      data: {
        firstName: null
      },
      computed: {
        ...mapGetters(["getFirstName"])
      },
      mounted() {
        this.firstName = this.getFirstName
      }
    })

Answer 2

Вы были правы, вычисленные оцениваются после вызова начальной функции data.

Я объясняю Каналы связи Vue в другом ответе , но вот простой пример того, что вы могли бы сделать.

Рассматривайте компонент Form как логику представления , поэтому он не должен знать о хранилище, вместо этого получая данные профиля в качестве реквизита.

export default {
    props: {
        profile: {
            type: Object,
        },
    },
    data() {
        return {
            accountInfo: {
                firstName: this.profile.firstName
            }
        };
    }
}

Затем позволяет родительскому элементу обрабатывать бизнес-логику , так что выборка информации из хранилища, запуск действий и т. Д.

<template>
    <EditAccount :profile="userProfile" :submit="saveUserProfile"/>
</template>
<script>
import { mapState, mapActions } from "vuex";

export default {
    components: { EditAccount },
    computed: mapState(['userProfile']),
    methods: mapActions(['saveUserProfile'])
}
</script>

Хотя Джейкоб не ошибается, говоря, что магазин готов , и что this.$store.state.userProfile.firstName будет работать, я чувствую, что это скорее патч вокруг проблемы дизайна, которую можно легко решить с помощью вышеприведенного решения.