Vue asnyc await over several layers

Viewed 34

I am currently building a small Vue JS app. I'm using a Simple State Management with Reactivity API to cache data between pages. But I also have some functions built in. One function is to fetch data from the backend. For the API communication I created a helper class that talks to the API. For example, a product list should be displayed. The component has a method that calls a store.js method. The store.js method then calls a method from the helper class. I work with fetch and async await. To display a list in the component view at the end of the day I need to pass the data from the helper class to the component using asnyc await. Now my question. Is this approach a crime against javascript? Is there a better solution for this?

The three relevant files.

// PageComponent
<script>
import { store } from '../helpers/store'

export default {
  data() {
    return {
      store,
      list: [],
    }
  },
  methods: {
    getData() {
      store.getData()
    }
  },
}
</script>


// store.js
import { reactive } from 'vue'
import  { comhelper } from "./comhelper";

export const store = reactive({
    brand: "",

    async getData() {
        return await comhelper.getData();
    }
});


// comhelper.js
export const comhelper = {
    async getSurveyData() {
        const d = await fetch('/data/db.json');        
        return await d.json();
    }
}
0 Answers
Related