Для того чтобы сделать один общий запрос для нескольких компонентов во фреймворке Vue.js, вам понадобится использовать механизм vuex, который является официальным паттерном управления состоянием для Vue.js.
В первую очередь, убедитесь, что вы уже установили пакет vuex в свой проект. Затем создайте новый файл для хранения вашего состояния. Назовите его, например, store.js.
В файле store.js вы создадите объект состояния, который будет содержать данные, необходимые для выполнения запроса. Например:
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
users: []
},
mutations: {
SET_USERS(state, users) {
state.users = users
}
},
actions: {
fetchUsers({ commit }) {
axios
.get('/api/users')
.then(response => {
commit('SET_USERS', response.data)
})
.catch(error => {
console.error(error)
})
}
},
getters: {
getUsers(state) {
return state.users
}
}
})
В данном примере мы объявляем объект состояния (state), который содержит пустой массив users. Затем мы объявляем мутацию (mutation) SET_USERS, которая будет использоваться для обновления состояния users. В actions мы объявляем метод fetchUsers, который выполняет запрос к API и вызывает мутацию SET_USERS с полученными данными. В геттерах мы создаем метод getUsers, который возвращает значения users из состояния.
Затем, импортируйте этот объект состояния в нужные компоненты. Например:
// UserList.vue
<template>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</template>
<script>
import { mapGetter, mapActions } from 'vuex'
export default {
computed: {
...mapGetters(['getUsers']),
users() {
return this.getUsers
}
},
created() {
this.fetchUsers()
},
methods: {
...mapActions(['fetchUsers'])
}
}
</script>
В данном примере мы используем методы mapGetter и mapActions для получения значения users из состояния и вызова метода fetchUsers из объекта состояния.
Таким образом, при создании компонента, который нуждается в общем запросе данных, мы вызываем метод fetchUsers, который производит запрос и обновляет состояние. В компоненте, который отображает результаты запроса, мы используем геттер getUsers для получения данных из состояния.
Это позволяет сделать один общий запрос для нескольких компонентов, и при обновлении состояния, все компоненты, использующие это состояние, будут автоматически обновлены с новыми данными.