Capture changes that were rendered with state in vueJS

Question

Capture changes that were rendered with state in vueJS

Navigation

#1 by (0 votes)

0

I am rendering data that is in state in vuex to some inputs that are scattered around the screen; I know I can not use the same method of a two-way-databiding to change the value of a state because it needs a commit to be changed.

How can I get all the input values in an easier way to commit so that state is changed?

I currently put a ref in each input but this is very verbose and I believe that I am mistaken in doing this and that there is a better 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

asked by anonymous 23.01.2018 / 18:09

1 answer

Change image of Navigation Drawer Activity return function json object

score 0 · Answer 1

Before presenting an alternative to your case, it follows information that justifies the way I am going to do it.

Vuex has a setting called strict mode , which can be true or false , this setting with value false allows you to make state out of muntations of store . Read more about strict mode and why it is not recommended in production mode here >.

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

This method I use in a framework of the nuxt framework , I used as an example a state of user with property to the name. Based on the documentation of vue, vuex, my experience and some links that I will put below, basically input receives the value of getter and pressing enter will fire actions as method that takes the field value and refresh user object using spread operator to merge, in state of store.

If you have any questions, please comment!

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 Nuxt.js documentation Event when pressing enter on Vue.js