@flafy4

Как правильно реализовывать обращение к API в Vue.js?

Как правильно реализовать отношения с API в Vue.js?

Написал небольшое API которое сохраняет данные в БД. Следовательно, отрывок кода из компонента страницы регистрации пользователя:

onNewUser () {
   const user= {
           id: null,
           login: this.login,
           email: this.email,
           password: this.pass,
   }
   this.$store.dispatch('createUser', user)
}


В store добавляет юзера в state но в шине(vuex) нельзя использовать vur-resource следовательно нельзя от туда обращаться с серверу как например:
this.$http.post('http://test-api.com/methods/user/user.ad.php', {user: userPayload})


в файле:
mutations: {
    createUser: function(state, userPayload) {
      state.products.push(product)
      // По логике тут нужно обращение к API что бы сохранить пользователя в БД, но vuex не позволяет это сделать.
    }
  },
  actions: {
    createUser: function({commit}, userPayload) {
      commit('createUser', userPayload)
    }
  },


А использовать такую конструкцию в каждом компоненте в котором необходимо какое либо обращение к API неправильно. Как быть?
  • Вопрос задан
  • 907 просмотров
Пригласить эксперта
Ответы на вопрос 2
be_a_dancer
@be_a_dancer
Middle Backend/Fullstack Developer
Рекомендую почитать официальный тред на эту тему. Особенно обратите внимание на ответы парня с ником jonagoldman
Ответ написан
@x-foby
Немножко не по теме, но всё же на будущее: обращение к апи лучше реализовывать не в mutations, а в actions. Mutations стоит использовать непосредственно для изменения состояния, всю остальную логику, тем более, связанную с асинхронными запросами к северу, писать в них не стоит.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы