How to pass data Between vue single file component - vue.js

Question

I have (my first) app in vue that get data from api and render some select elements.
I want to separe each box to another file (one file for get data from api, second for render select, third for render list).
How can i pass data from
I tried to get data from instance of api:
export default {
props: {
filters: apiIntance.$data.kpis.filters,
For this moment i have something like that:
<!-- src/components/Filters.vue -->
<template>
<div class="filters">
<label v-bind:key="filter.id" v-for="filter in filters">
<select class="js-selectbox">
<option v-bind:value="item.id" v-bind:key="item.id" v-for="item in filter.items">{{item.name}}</option>
</select>
</label>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Api from './ApiTest.vue';
export default {
props: {
filters: //Get Data from ApiTest.vue
},
};
</script>
<!-- src/components/ApiTest.vue -->
export default Vue.extend({
data(): DataObject {
return {
kpis: {
...
},
};
},
Have you some tips how to get data in one file and spread it for other files?

Answer 1

You might be looking for Vuex which is a vue data management plugin that all your components will have access to
import Vue from 'vue'
import Vuex from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
// data will be stored here
state: {
apiData: null,
},
mutations: {
// you call this mutation to add data
apiData(state) {
state.apiData = apiData
}
},
getters: {
// a getter for the data
apiData(state) {
retrun state.apiData
}
}
})
// new Vue({...,store})
you can add data to the store immediately after the fetching with :
this.$store.commit('apiData',yourdatahere)
and then access/get it on any component with :
this.$store.getters.apiData
you can read more about Vuex

Answer 2

There are numerous ways, to name a few
one file for get data from api don't need to be a vue instance. You may want to add more hooks.
// ApiService.ts
export const ApiService = { getData: () => {/**/} }
// src/components/Filters.vue
...
<script lang="ts">
import Vue from 'vue';
import {ApiService} from '#/.../ApiService'
export default {
data: () => ({
filters: []
}),
created() {
ApiService.getData().then(data => this.filters = data)
}
};
</script>
You can certainly make a Vue instance to provide data, to make it reactive and component independent from data logic. For example:
// ApiService.ts
const ApiService = new Vue({
data: () => ({
filters: []
}),
created() {
request().then(data => this.filters = data)
}
})
// src/components/Filters.vue
...
<script lang="ts">
import Vue from 'vue';
import {ApiService} from '#/.../ApiService'
export default {
computed: {
filters() {
return ApiService.filters
}
}
};
</script>