Vuex不更新使用mapState映射的計算變量

Question

我lookedatseveralquestions找出我 做錯了什麼。一切看起來對我來說安裝正確。

GOAL

基於的組分A變化依賴分量使用v-show隱藏/顯示內容的值。

問題

內TextField組件，有觸發對我vuex store突變的輸入。 相關組件的值爲computed，它監聽vuex store上的更改。

當在我的TextField組件中輸入時，我可以使用Vue.js extension驗證突變是如預期那樣觸發的。

但是頁面沒有變化。

組分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> 

突變

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。