How works reactive store sync?

[renatorib]

Hello, In my project, I have this store:

var items = {
  data: [],
  fetch: function(query){
    doAsyncFetch(query, function(resData){
      Vue.set(this, 'data', resData);
    });
  }
}

And in my component, I've setted:

Vue.component('page-items', {
  data: function(){ 
    return {
      items: items.data
    }
  }
});

But when I fetch store with items.fetch(someQuery), the items.data are updated, but $vm.items don't update.

If I replace Vue.set(this, 'data', resData); for this.data = resData doesn't works too. The only way that works is when I use items.data.push({});, but I can't push an entire array, I need replace.

Help me understand how works reactive sync, please. Thanks!

[renatorib]

Well, It worked with jQuery extend (or underscore/lodash extend)

$.extend(this.data, resData);

But I still don't understand how it works.

[Jokcy]

var items = {
  data: [],
  fetch: function(query){
    doAsyncFetch(query, function(resData){
      Vue.set(this, 'data', resData);
    });
  }
}

are sure 'this' is really 'this'?

[renatorib]

Yes, it's only an example I've writed, but is really 'this'.

I already solved this problem in vue forums :D Thanks

[narazin]

Can you share your solve?

[renatorib]

1 year ago, I don't remember, sorry.