VuexがmapStateを使用してマップされた計算された変数を更新しない

Question

lookedatseveralquestions私は を間違って実行しています。すべて私はセットアップが正しく見えます。 依存コンポーネントにv-showを用いCOMPONENT A変更表示/非表示内容の値に基づいて

GOAL

。

PROBLEM

TextFieldコンポーネントの内側には、私のvuex storeに突然変異をトリガ入力があります。 従属コンポーネントのcomputedの値は、vuex storeの変更をリッスンします。

TextField Componentと入力すると、Vue.js extensionを使用して突然変異が予想通りに発生していることを確認できます。

ただし、ページに変更はありません。

COMPONENT A何で私

<template> 
    <div class="field"> 

    <input type="text" :name="field.name" v-bind:value="value" v-on:input="updateValue($event.target.value)"> 

    </div> 
</template> 

<script> 
export default { 
    props: ['field'], 
    methods: { 
    updateValue: function (value) { 
     this.$store.commit('UPDATE_USER_INPUT', {'key': this.field.name, 'value': value}) 
    } 
    } 
} 
</script> 

MUTATION

UPDATE_USER_INPUT (state, payload) { 
    state.userInput[payload['key']] = payload['value'] 
} 

依存コンポーネント

<template> 
    <div class="field-item"> 
    {{ userInput }} 
    </div> 
</template> 

<script> 
import { mapState } from 'vuex' 

export default { 
    computed: { 
    ...mapState([ 
     'userInput' 
    ]) 
    } 
} 
</script> 

試してみてください{{ userInput }}が空のままになります：{}私は同じ場所に戻って自分のルートをナビゲートするまで。しかし、計算された値リスナはトリガされません。

Answer 1

あなたはvuex状態以内に新しいkeyを設定している場合は、あなたが使用する必要があります：

UPDATE_USER_INPUT (state, payload) { 
    Vue.set(state.userInput, payload.key, payload.value) 
} 

それ以外の場合は、反応性ではありません。

documentationを参照してください。