Vue.js/vuex Ajax Update Components With Ajax State

I'm using vue webpack template with vuex and I'm basically having issues with components not updating with the state. I have a store const state = { userData: {}, } In my app I

Solution 1:

you were on the right paths. Computed properties is definitely the way to go here. In you current situation your component knows nothing about the store in any reactive way. You just have a function that tries to read out the data at any given point and the correct data may be there or not.

So first of all, if the component is nested under the parent, as it seems to be this.$store will point to the same store. You should then try to use the needed value as a property, so it's reactive.

computed: {
  userData: function () {
     returnthis.$store.state.userData
  }
}

and while you are on it, also throw the weekdata into the computed properties:

computed: {
  userData: function () {
     returnthis.$store.state.userData
  },
  weekData: function () {
    return {
      weekDataList: _.values(this.userData)
    }
  }
}

By doing this, all the data will be reactive, and the weekData will update accordingly.

Hope this helps, and in general, when you are using Webpack already, I would consider starting to use the ES6 Syntax as it makes things more readable and some parts a little cleaner :)