Как перенести этот код в Vuex?

Question

[heducose]

Нужно перенести кусок логики в Vuex.

Оригинал:

<template>
  <section>
    <label for="email">Email</label>
    <input v-model="user.email">
    <label for="password">Password</label>
    <input v-model="user.password">
    <button @click="submit">click</button>
    <p>{{data}}</p>

  </section>
</template>

data () {
 return {
   user: {
      email: '',
      password: ''
    },
    data: ''
}
}

метод:

submit () {
      axios.post('http://localhost:7777/signup', this.user)
        .then((res) => {
          this.data = res.data.token<code></code>
          console.log(this.data)
        })
    }

Вот что набросал в Vuex:

export const store = new Vuex.Store({
  state: {
    user: {
      email: '',
      password: ''
    },
    data: ''
  },
  mutations: {
    stuff (state, data) {
    }
  },
  actions: {
    asyncstuff ({ commit, state }) {
      axios.post('http://localhost:7777/signup', state.user)
        .then((res) => {
          commit('stuff')
        })
    }
  }
})

registerUser () {
      this.$store.dispatch('asyncstuff', this.user)
    }

<input v-model="$store.state.user.email">
    <label for="password">Password</label>
    <input v-model="$store.state.user.password">
    <button @click="registerUser">click</button>
    <p>{{$store.state.data}}</p>

В общем-то, сохранение в базу, т.е. POST работает, НО, я не могу понять как мне получить res? Как вывести res.data.token из Vuex?

Answer 1

[Evgeny Kulakov]

А в чем проблема? Передайте res в коммит вторым параметром, извлеките из него что нужно, сохраните в стор.
Ещё у вас чуть идеология vuex нарушается, вы используете v-model т.е напрямую изменяете стейт, а должны это делать только через мутации.

Comments

[heducose]

Не понял насчет v-model, можно пожалуйста подробнее намекнуть как это сделать через мутации?

[heducose]

Я ведь отправляю данные из формы на сервер, а не просто "мутирую", как сделать по другому?

[Evgeny Kulakov]

heducose: Вот у вас строчка есть: <input v-model="$store.state.user.email"> она говорит о том, то при изменении в инпуте переменной из стора будет присвоено значение. Это есть неверно с т.зрения vuex идеологии. Только через мутацию можно изменить состояние хранилища. Скорее всего в отладке вы получите предупреждение или ошибку.
Далее, не стоит хранить пароль в сторе, это ни к чему и с т.зрения безопасности странно.
У вас в принципе все сделано, т.е. у вас есть компонент авторизации, берете значения из полей(переменные хранения полей объявляете локально в data компонента) далее делаете dispatch на сервер, ловите ответ, из ответа выдергиваете, что нужно - токен, пользователя, делаете коммит полученных данных в стор. Потом в других компонентах можете использовать эту информацию через стейт или геттеры.

[heducose]

Evgeny Kulakov: я теперь окончательно запутался. Это жесть полная! Если я перенесу в data компонента, то как я получу доступ из мутаций и экшена?

[Evgeny Kulakov]

heducose: вы когда на кнопку авторизации жмете, то вызываете экшн и передаете параметром данные, которые отправятся на сервер, так? Далее в этом экшене ловите ответ на ваш запрос и делаете коммит в стор той информации, которая пришла. В ответе у вас может быть токен или профиль пользователя, может, что-то ещё. Вроде все ясно или мы не понимаем друг друга.

[heducose]

Evgeny Kulakov: не понимаем.

У меня это

axios.post('http://localhost:7777/signup', state.user)
          .then((res) => {
            commit('stuff', state.data)
            state.data = res.data
            console.log(state.data.token)
          })

Если я сделаю по вашему и перенесу data в компонент, то я не смогу получить доступ к этим данным из компонента - как мне авывести state.data.token и тд? state работать не будет. this тоже не работает в экшене.

[Evgeny Kulakov]

Вот у вас летит из компонента:

registerUser () {
      this.$store.dispatch('asyncstuff', this.user)
    }

Вот обращение к серверу, получение ответа и коммит:

asyncstuff ({ commit, state }, user) {
      axios.post('http://localhost:7777/signup', user)
        .then((res) => {
          commit('stuff', res.data)
        })
    }у

Вот вызов мутации:

stuff (state, data) {
  state.token = data.token
}

После мутации в state сидит token.
Далее в любом компоненте обращаемся и получаем токен:
this.$store.state.token

[heducose]

Evgeny Kulakov: ну нету доступа к токену! Я выводил вот что после сабмита

<p>{{this.$store.state.token}}</p>

Теперь ничего не выводится.

[heducose]

О, прошу прощения, надо было в state прописать token: ''
Спасибо. Ничего не понятно, но спасибо))

[heducose]

Поразительно, как можно было простую вещь сделать настолько неимоверно сложно! ЗАЧЕМ? Это ужас.

[Evgeny Kulakov]

heducose: Ответ станет очевидным, когда приложение начнет расти) Что например делать если у вас токен должен использоваться в десяти разных компонентах и каждый компонент его может менять, соответственно остальные должны синхронизироваться с изменением? Что делать, если этот токен меняется асинхронно? Все эти проблемы решает vuex.