Как сделать post запрос axios во vuex?

Пользователь

от narciso , в категории: JavaScript , год назад

Как сделать post запрос axios во vuex?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от kennedi_pfeffer , 9 месяцев назад

@narciso 

В Vuex для отправки POST запроса через axios можно использовать следующую структуру:

  1. В файле Vuex создаём action:
1
2
3
4
5
6
7
actions: {
  async postData({commit}, data) {
    const url = 'https://example.com/api/post-data'
    const response = await axios.post(url, data)
    commit('setResult', response.data)
  }
}


  1. В мутации задаем функцию для сохранения данных:
1
2
3
4
5
mutations: {
  setResult(state, result) {
    state.result = result
  }
}


  1. В компоненте Vue вызываем функцию postData из actions в методе:
1
2
3
4
5
methods: {
  submitForm() {
    this.$store.dispatch('postData', this.form)
  }
}


  1. Форматируем данные и отправляем их в Vuex:
 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
28
29
30
31
<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="form.name">
    <input type="email" v-model="form.email">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      }
    }
  },

  methods: {
    submitForm() {
      this.$store.dispatch('postData', {
        name: this.form.name,
        email: this.form.email
      })
      this.form.name = ''
      this.form.email = ''
    }
  }
}
</script>