How to assign value from mapGetters to data?

Question

Vue.js

There is a textarea

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

Farther

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

After

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

And at the very end

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

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

Explain what I'm doing wrong!!!!!!!!!!
Well, it's just tin ... how to fix ??????

Answer 1

I think for it to work you need getOneTask to return a Promise
Something like this
in actions

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

in the component

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;

Remember, in vue you can't change an object's property by direct assignment!
In this case, the property of the object changes, but vue does not know that the data has changed. Reactivity does not work, as a result, the component is not re
-rendered. To make it work, you need to use the Vue.set () method, like this:
Then everything will work.
Read about Vue.set() in the vue docs? What is its syntax and what are the aliases. Then everything will work out

Answer 3

Found a solution!!!
This is how I see how the variable has changed and then I can do what I want!
created() {
this.$store.watch(
(state, getters) => getters.getOneTask,
(newValue) => {
console.log("%c ************** " , "background-color:red;color:#fff;");
console.log(newValue);
});
},