Value not being recorded?

Question

Vue.js

There is a component - a large form

data: {
  return {
    form: {
      // тут объект с глубокой вложенностью
    },
  }
}

Here is the method in actions where i make the request

async getDataFromApi({ commit }) {
    const res = await axios.get('url');
    if (res.data) {
      commit('mutationName', res.data);
    }
    return res;
  },

And here I call this action in the component

methods: {
  ...mapActions('api', ['getDataFromApi']),
  getData() {
    this.getDataFromApi().then(res => {
      if(res.status === 200 && res.data) {
        this.form = res.data; // тут this.form остается прежним, не меняется
      }
    })
  },
},

So, help me understand why this.form does not change.

Answer 1

Is this the whole code?
If so, then everything is simple, you do not call the method anywhere - getData () is the time.
Two - this method (getData() ) is not needed at all, since
...mapActions('api', ['getDataFromApi']), - has already added the getDataFromApi method, so
in the end you need to do it in the created/mounted hook or in another method call

methods: {
  ...mapActions('api', ['getDataFromApi']),
},
created() {
    this.getDataFromApi().then(res => {
      if(res.status === 200 && res.data) {
        this.form = res.data; // тут this.form должен изменится
      }
    })
},

well, it’s strange that you work with vuex in this case :)
apparently you should start with the basics of js, only then frameworks ...

Answer 2

data must be a function that returns form
data(){
return{
form:{}
}
}