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();
}
}