0

Estou renderizando os dados que estão em um state no vuex em alguns inputs que ficam espalhados pela tela; sei que não consigo utilizar o mesmo método de um "model" (two-way-databiding) para alterar o valor de um state pois o mesmo precisa de um commit para ser alterado.

Como posso pegar todos os valores do input de uma maneira mais facil para efetuar o commit para que o state seja alterado?

atualmente eu coloquei um ref em cada input mas isso esta muito verboso e acredito que eu esteja me equivocando em fazer isso e que existe uma maneira mais adequada:

<template>
    <div>
        <b-form-input :value="order.payer" ref="payer"></b-form-input>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
...
...
computed: mapGetters({
    // order preenche os inputs com por exemplo: "order.id" e "order.payer"
    order: 'getOrderObject',
}),
...
...
methods: {
    save () {
        let inputs = {
            payer: this.$refs.payer.$el.value // muito verboso :(
        }
    }
}
...
...
4
  • Você não pode simplesmente alterar o objeto order e depois dar commit dele de volta? Outra opção é ter algo como uma array/objeto de inputs no data do componente, e usar isso com v-model no template. O método save só precisaria pegar essa lista de inputs para dar commit.
    – bfavaretto
    Commented 23/01/2018 às 17:30
  • @bfavaretto eu pensei em "clonar" o state de order e depois enviar um commit.
    – RFL
    Commented 23/01/2018 às 17:31
  • Nem sei se precisa clonar
    – bfavaretto
    Commented 23/01/2018 às 17:33
  • acredito que eu não consiga alterar o objeto order porque ele representa meu state e não posso alterado sem fazer commit
    – RFL
    Commented 23/01/2018 às 17:46

1 Resposta 1

0

Antes de apresentar uma alternativa para seu caso, segue uma informação que justifica a maneira como vou fazer.

Vuex tem uma configuração chamada strict mode, que pode ser true ou false, esta configuração com valor false permite que você faça alterações do state fora dos muntations da store. Leia mais sobre o strict mode e por que ele não é recomendado em modo de produção aqui.

Esse jeito é baseado na documentação do vue, nuxt, minha experiência e mais alguns links que vou deixar abaixo.

Esse método eu uso em uma estrutura do framework nuxt, usei como exemplo um state de usuário com a propriedade para o nome. Baseado na documentação do vue, vuex, minha experiência e alguns links que vou colocar lá embaixo, basicamente o input recebe o valor do getter e ao apertar enter você dispara um actions como método que pega o valor do campo e atualiza objeto user, usando spread operator pra fazer merge, no state da store.

Se tiver dúvida comenta!

index.vue

<template>
  <input type="text" :value="user.name" @keyup.enter="updateName($event)">
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'

  export default {
    methods: {
      ...mapActions({
        updateName: 'updateName'
      })
    },
    computed: {
      ...mapGetters({
        user: 'getUser'
      })
    }
  }
</script>

store/index.js

import Vuex from 'vuex'

import getters from './getters'
import actions from './actions'
import mutations from './mutations'

const createStore = () => {
  return new Vuex.Store({
    state: {
      user: {
        name: ''
      }
    },
    getters,
    actions,
    mutations
  })
}

export default createStore

store/getters.js

const getters = {
  getUser(state) {
    return state.user
  }
}

export default getters

store/actions.js

const actions = {
  updateName({ commit, getters }, event) {
    event.preventDefault()

    let name = event.target.value

    commit('SET_USER', { name })
  }
}

export default actions

store/mutations.js

const mutations = {
  SET_USER(state, user) {
    state.user = { ...state.user, ...user }
  }
}

export default mutations

links Vuex Store pela documentação do Nuxt.js Evento ao apertar enter no Vue.js

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .