web-dev-qa-db-ja.com

vモデルが反応しないVuex入力

できるだけ簡単に説明するようにしています。私はこのようなものを持っています。シンプルVueルート、Vuexストア、ナビゲーションバーID内のv-modelを使用した入力。

その入力は反応しません...なぜですか？！

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ルート

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

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

計算されたプロパティにバインドしています。 set計算されたプロパティの値を設定するには、getメソッドとsetメソッドを記述する必要があります。

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

そしてあなたの店で

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

これで、testにバインドされた入力の値を変更すると、ストアへのコミットがトリガーされ、ストアの状態が更新されます。

22
czarchaic

そのためにv-modelを使用したくありません。代わりに、入力フィールドとmethodsフックで@input="test"を使用してください。

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

Vuexストア内：

mutations：

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

actions：

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

これで入力がリアクティブになり、結果が@{{test}}に表示されます。

Vuexでユーザー入力を処理する方法の例を次に示します。 http://codepen.io/anon/pen/gmROQq

2
Mahmud Adam

私のライブラリを使用すると、Vuexでv-modelを簡単に使用できます（変更ごとにアクション/ミューテーションが発生します）。

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>
1
Yaroslav Dobzhanskij

computedプロパティは一方向です。双方向バインディングが必要な場合は、他の回答が示唆するようにセッターを作成するか、代わりに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 };
  }
});

ただし、入力値を検証するにはセッターの方が適しています。

0
Hyunsoo Kim