Capture changes that have been rendered with state in vueJS

Asked

Viewed 313 times

0

I’m rendering the data that’s in one state in the vuex on some inputs that are scattered around the screen; I know I can’t use the same method of a "model" (two-way-databiding) to change the value of a state because it needs a commit to be amended.

How can I take all input values in an easier way to commit state be amended?

currently I put a ref in every input but this is very verbose and I believe I am mistaken in doing this and that there is a more appropriate way:

<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 :(
        }
    }
}
...
...
vue.js vuex

  • Can’t you just change the order object and then commit it back? Another option is to have something like an array/input object at the component date, and use this with v-model in the template. The save method would only need to take this list of inputs to commit.

  • @bfavaretto I thought of "clone" the state of order and then commit.

  • I don’t even know if you need to clone

  • I believe I can’t change the object order because he represents my state and can’t change without committing

1 answer

0

Before presenting an alternative to your case, follow an information that justifies the way I will do.

Vuex has a configuration called Strict mode, which may be true or false, this setting with value false allows you to make changes to the state outside the muntations of store. Read more about the Strict mode and why it is not recommended in production mode here.

This way is based on the documentation of Vue, nuxt, my experience and some more links I will leave below.

This method I use in a nuxt framework structure, I used as an example state user with the property for the name. Based on the documentation of Vue, vuex, my experience and some links that I will put down there, basically the input receives the value of getter and by pressing enter you fire a actions as a method that takes the value of the field and updates the object user, using Operator spread to merge, in the state store.

If in doubt comments!

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 for the Nuxt.js documentation Event by pressing enter in Vue.js

Browser other questions tagged vue.js vuex

You are not signed in. Login or sign up in order to post.