Я попытался получить данные в App.vue, а затем передать значение this.store.data. После этого я могу использовать значение this.store.data для всех других компонентов. Проблема заключается в том, что когда я щелкаю ссылку (router-link), функция внутри компонентов запускается до извлечения данных в приложении. Можно ли как-нибудь это исправить? Как получить данные и использовать для всех других компонентов?
Вот код store.js:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
senator: [],
},
mutations: {},
actions: {}
});
Вот код выборки данных в App.vue:
<script>
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
components: {Header, Footer},
data(){
return {
senatorA: [],
}
},
created: function(){
this.getData();
},
methods: {
getData() {
let pathSenate = 'senate';
let url = '';
let currentPage = window.location.href;
if (currentPage.includes(pathSenate)) {
url = 'https://api.myjson.com/bins/1eja30';
} else {
url = 'https://api.myjson.com/bins/j83do';
}
fetch(url)
.then(response => response.json())
.then((jsonData) => {
let data = jsonData;
this.senatorA = data.results[0].members;
this.senatorA.forEach(mem => {
mem.fullname = (mem.first_name + ' ' + mem.middle_name + ' ' + mem.last_name).replace(null, '');
});
this.$store.state.senator = this.senatorA;
console.log(this.$store.state.senator)
});
},
}
}
Вот код в компоненте для получения данных из функции извлечения в App.vue:
<script>
import DataTable from './DataTable'
export default {
name: "FilterData",
components: {DataTable},
data () {
return {
senatorF: this.$store.state.senator,
checkarr: [],
selectarr: '',
statearr: [],
searchName: '',
tempt: [],
}
},
created: function(){
this.getStates();
},
computed: {
displayParty() {
if (this.checkarr.length == 0 && this.selectarr == '') {
return this.searchData(this.senatorF);
} else if (this.checkarr.length != 0 && this.selectarr == '') {
this.tempt = this.senatorF.filter(j => this.checkarr.includes(j.party));
return this.searchData(this.tempt);
} else if (this.selectarr != '' && this.checkarr.length == 0) {
this.tempt = this.senatorF.filter(j => this.selectarr.includes(j.state));
return this.searchData(this.tempt)
} else {
let memFilter= [];
for (let j = 0; j < this.senatorF.length; j++) {
for (let i = 0; i < this.checkarr.length; i++) {
if (this.senatorF[j].party == this.checkarr[i] && this.senatorF[j].state == this.selectarr) {
memFilter.push(this.senatorF[j]);
}
}
}
return this.searchData(memFilter);
}
},
},
methods: {
getStates: function () {
console.log(this.senatorF)
this.senatorF.forEach(mem => {
if (!this.statearr.includes(mem.state)) {
this.statearr.push(mem.state);
console.log('addrow')
}
});
},
searchData: function(array){
return array.filter(mem => mem.fullname.toLowerCase().includes(this.searchName.toLowerCase()) || mem.votes_with_party_pct.toString().includes(this.searchName.toLowerCase()))
}
},
};
И вот результат в консоли:
Результаты консоли показывают функцию в компоненте, выполняемом до извлечения данных в App.vue