v-model을 사용한 Vuex 입력이 반응하지 않음

v-model을 사용한 Vuex 입력이 반응하지 않음

나는 가능한 한 간단하게 설명하려고 한다.이런 게 있어요.단순 Vue 루트, Vuex 저장 및 입력은 navbar ID 내에 v-model을 사용하여 수행합니다.

그 입력은 반응하지 않는다...왜?!

HTML

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

store.displaces를 설정합니다.

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
    }
  }
})

계산된 속성에 바인딩되어 있습니다.계산된 속성에 값을 설정하려면 다음을 기록해야 합니다.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;
    }
}

이제 테스트할 입력 값을 변경하면 저장소에 대한 커밋이 트리거되어 상태가 업데이트됩니다.

사용하고 싶지 않은 경우v-model그럴 수 있어요.대신,@input="test"입력 필드 및 에서methods후크:

 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

쉽게 사용할 수 있다v-modelVuex(변경 시마다 동작/변화가 실행됨)를 사용하여 다음을 수행합니다.

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>

그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 };
  }
});

그러나 입력값을 검증하려면 세터가 더 좋습니다.

언급URL : https://stackoverflow.com/questions/42755289/vuex-input-with-v-model-not-reactive