@gage
Для обновления данных на странице с помощью AJAX, Vue.js и Vuex вам понадобятся следующие шаги:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// store.js import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) const store = new Vuex.Store({ state: { data: null }, mutations: { updateData(state, payload) { state.data = payload } } }) export default store |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// MyComponent.vue {{ data }} Обновить данные export default { computed: { data() { return this.$store.state.data } }, methods: { fetchData() { const url = 'ваш_url' fetch(url) .then(response => response.json()) .then(data => { this.$store.commit('updateData', data) }) } } } |
1 2 3 4 5 6 7 8 9 |
// main.js import Vue from 'vue' import App from './App.vue' import store from './store' new Vue({ store, render: h => h(App), }).$mount('#app') |
Теперь ваш компонент MyComponent.vue
отображает данные из состояния Vuex, а при нажатии на кнопку "Обновить данные" вызывается метод fetchData
, который выполняет AJAX-запрос, обновляет данные с помощью мутации Vuex и отображает обновленные данные на странице.
Обратите внимание, что вам нужно будет заменить 'ваш_url'
на URL-адрес вашего сервера, с которого вы получаете данные.