Vuex 입력이없는 V- 모델

Question

가능한 한 간단하게 설명하려고합니다. 나는 이런 것을 가지고있다. 간단한 Vue 루트, Vuex 스토어 및 navbar ID 내부에 v-model으로 입력.

입력이 반응이 없습니다 ... 왜요?!

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

뷰 루트

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

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

Answer 1

v-model을 사용하고 싶지 않습니다. 대신, 입력 필드에 @input="test"를 사용하고 당신의 methods 후크의 :

mutations에서 :

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

actions에서 :

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

당신의 Vuex 가게 내부

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

입력은 이제 반응해야하며, 당신은 여기에 내가 Vuex와 사용자 입력을 처리하는 방법의 예입니다 @{{test}}

에 결과를 볼 수 : http://codepen.io/anon/pen/gmROQq

Answer 2

당신은 계산 된 속성에 바인딩하고는. 에을 계산 속성의 값으로 설정하려면 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; 
    } 
} 

이제 상점에서

, 그것은 그것의 상태를 업데이트 가게, 저지 트리거합니다.