Option to fetch data in the model on initialization

[calebsmithdev]

I need to fetch data on initialization if no data exists - keeping that logic all in one contained area instead of repeated for every component that needs access to the results. I thought I could hook into the beforeSelect lifecycle, but there is no await there so the pending promise freaks it out. Does anyone have any tips on how to make this happen?

Example: On page load, I have the below code and it tries to fetch data. None exists because it hasn't been initialized yet.

computed: {
      projects: () => Project.all(),
    },

edit: I guess this might not matter as much until there are loaders with #76 , but I am still curious to see how I can streamline some of this!

[kiaking]

@CalebJTSmith I understand your pain. Though, it's more of Vue's limitation. You shouldn't be calling async operation on computed property. You need to separate Write operation (loading data from the backend and writing into the store) and Reading operation (get data out of the store).

What you're trying to do, is same as calling Vuex actions inside computed property. You don't want to do that.

So, you need to do this.

export default {
  computed: {
    projects: () => Project.all(),
  },

  mounted () {
    Project.fetchDataFromBackend()
  }
}

To reduce boilerplate, you could use mixin.

// Mixin
export default function Fetch (model) {
  return {
    computed: {
      projects: () => model.all(),
    },

    mounted () {
      model.fetchDataFromBackend()
    }
  }
}

// Vue Component.
export default {
  mixins: [Fetch(Project)]
}

What do you think?

[calebsmithdev]

That mixin is interesting - I didn't realize we could create mixins like that, so that's really exciting! This sounds like the most reasonable and reuse-able setup that I can get to keep the general flow pretty standardized.

I appreciate the effort and time to respond to my question - and thanks for working on this package! It's truly been a lifesaver.