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

Question

[flafy4]

Как правильно реализовать отношения с 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 неправильно. Как быть?

Answer 1

[Сергей Попов]

Рекомендую почитать официальный тред на эту тему. Особенно обратите внимание на ответы парня с ником jonagoldman

Comments

[flafy4]

К сожалению такого пользователя нет. Может вы опечатолись?

[Сергей Попов]

flafy4, Вполне возможно. А может быть вы невнимательно посмотрели? Кстати, там три его годных комментария.

[flafy4]

Сергей Попов, Прошу прощения, мне почему то казалось что вы имели в виду пользователя на данном сайте, а не на хабе.

Answer 2

[x-foby]

Немножко не по теме, но всё же на будущее: обращение к апи лучше реализовывать не в mutations, а в actions. Mutations стоит использовать непосредственно для изменения состояния, всю остальную логику, тем более, связанную с асинхронными запросами к северу, писать в них не стоит.