vuexの入力がVモデルと反応しない

Question

できるだけ簡単に説明しようとします。私はこのようなものを持っています。シンプルなVueルート、Vuexストア、およびナビバーID内のVモデルによる入力。

その入力は反応的ではありません...なぜですか？

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

Answer 1

あなたはそのためにv-modelを使いたくありません。代わりに、あなたの入力欄に、あなたmethodsフックで@input="test"を使用します。

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

あなたVuex店内：mutationsで

：actionsで

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

：

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

入力は、今に反応性でなければならない、あなたはここで私は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; 
    } 
} 

で今、それはその状態を更新ストアにコミットをトリガします。