Как присвоить значение из mapGetters в data?

Question

[seredaes]

Есть textarea

<textarea class="input-container__input" rows="3" placeholder="Введите описание задачи" v-model="formData.description"></textarea>

Дальше

data() {
            return {
                          formData: {
                                  description: "данные загружаются"
                          }
          }

После

computed: {
            ...mapGetters({
                getOneTask: 'getOneTask',
            }),
        },

И в самом конце

created() {
            // вызываю через mapActions по AJAX загрузить данные
            this.loadTaskById(this.$route.params.id);

           <b> // ВОТ ЗДЕСЬ С....А НЕ РАБОТАЕТ!!! УЖЕ 2 ДЕНЬ БЬЮСЬ!!!!
            this.formData.description = this.getOneTask.description;</b>
        },

Объясните, что я не так делаю!!!!!!!!!
Ну это просто жесть...как поправить ??????

Answer 1

[Ильдус Сираев]

Я думаю, чтобы работало нужно чтобы getOneTask возвращал Promise
Что-то типа этого

в actions

async loadTaskById() {
    const {data} = await axios.get('[url]');
    commit('MUTATE_FORM_DATA', data);
}

в компоненте

async created() {
            // вызываю через mapActions по AJAX загрузить данные
            await this.loadTaskById(this.$route.params.id);
            this.formData.description = this.getOneTask.description
}

Answer 2

[Владимир Сартаков]

this.formData.description = this.getOneTask.description;

Запомни в vue нельзя изменять свойство объекта прямым присваиванием!
В таком случае свойство обьекта меняется, но vue не знает что данные изменились. Не работает реактивность, в результате компонент не перерисовывается
Что бы заработало нужно использовать Vue.set() метод, например так:

this.$set(this.formData, "description", this.getOneTask.description)

Тогда все заработает.
Почитай в vue доках про Vue.set() ? Какой у него синтаксис и какие псевдонимы. Тогда все получится

Comments

[seredaes]

Спасибо за совет, почитаю

Answer 3

[seredaes]

Нашел решение!!!
Вот так смотрю, как переменная изменилась и дальше могу делать, что хочу!

created() {

this.$store.watch(
(state, getters) => getters.getOneTask,
(newValue) => {
console.log("%c ************** ", "background-color:red;color:#fff;");
console.log(newValue);
});

},

Comments

[Дмитрий]

Это не решение, это костыль.