web-dev-qa-db-fra.com

Vuex entrée avec v-modèle non réactif

J'essaye de l'expliquer le plus simplement possible. J'ai quelque chose comme ça. Vue Vue simple, magasin Vuex et saisie avec v-model dans l’identificateur de barre de navigation.

Cette entrée n'est pas réactive ... Pourquoi?!

 enter image description here

 enter image description here

HTML

<div id="navbar">
    <h2>@{{ test }}</h2>
    <input v-model="test" />
</div>

store.js

import Vuex from 'vuex'

export const store = new Vuex.Store({
  state: {
    test: 'test'
  },
  getters: {
    test (state) {
      return state.test
    }
  }
})

Vue Racine

import { store } from './app-store.js'

new Vue({
  el: '#navbar',
  store,
  computed: {
    test () {
      return this.$store.getters.test
    }
  }
})
javascriptvue.jsvuex
6
Krystus

Vous êtes lié à une propriété calculée. Afin de définir une valeur sur une propriété calculée, vous devez écrire les méthodes get et set.

computed:{
    test:{
        get(){ return this.$store.getters.test; },
        set( value ){ this.$store.commit("TEST_COMMIT", value );}
    }
}

Et dans votre magasin

mutations:{
    TEST_COMMIT( state, payload ){
        state.test=payload;
    }
}

Désormais, lorsque vous modifiez la valeur de l'entrée liée à tester, cela déclenche une validation dans le magasin, qui met à jour son état.

22
czarchaic

Vous ne voulez pas utiliser v-model pour cela. Utilisez plutôt @input="test" dans votre champ de saisie et dans votre hook methods:

 test(e){
    this.$store.dispatch('setTest', e.target.value)
 }

Dans votre magasin Vuex:

Dans mutations:

   setTest(state, payload){
      state.test = payload
   },

Dans actions:

setTest: (context,val) => {context.commit('setTest', val)},

L'entrée devrait maintenant être réactive et vous devriez voir le résultat dans @{{test}}

Voici un exemple de la façon dont je gère les entrées utilisateur avec Vuex: http://codepen.io/anon/pen/gmROQq

2
Mahmud Adam

Vous pouvez facilement utiliser v-model avec des actions/mutations déclenchées à chaque changement avec l'utilisation de la bibliothèque de mine:

https://github.com/yarsky-tgz/vuex-dot

<template>
  <form>
    <input v-model="name"/>
    <input v-model="email"/>
  </form>
</template>

<script>
  import { takeState } from 'vuex-dot';

  export default {
    computed: {
      ...takeState('user')
        .expose(['name', 'email'])
        .commit('editUser') // payload example: { name: 'Peter'}
        .map()
    }
  }
</script>
0
Yaroslav Dobzhanskij

Je pense que la propriété 'calculée' est un moyen. Si vous souhaitez une liaison bidirectionnelle, définissez le séparateur comme les autres réponses ou utilisez la propriété 'data'.

import { store } from './app-store.js'

new Vue({
  el: '#navbar',
  store,
  // computed: {
  //  test () {
  //    return this.$store.getters.test
  //  }
  // }
  data: function () {
          return { test: this.$store.getters.test }
  }
})

Mais il vaut mieux valider la valeur d’entrée.

0
Hyunsoo Kim