Vuex不使用mapState更新映射的计算变量

Question

我看着 在 几个 问题要弄清楚什么我做错了.一切都看起来正确的设置.

目标

基于COMPONENT A的值,v-show在DEPENDENT COMPONENT中使用更改隐藏/显示内容.

问题

在TextField Component内部,有一个输入触发了我的变异vuex store.Dependent Component有一个computed值,用于侦听对其的更改vuex store.

在我的TextField组件中键入时,我可以使用Vue.js扩展来验证突变是否按预期触发.

但是,页面上没有任何变化.

组件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

如果您key在vuex状态下设置新的,则需要使用:

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

否则它不会被动反应.

见文档.