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

Question

我looked at several questions弄清楚我是什么做错了。在我看来一切都正确设置。

目标

根据 COMPONENT A 的值，在 DEPENDENT COMPONENT 中使用 v-show 更改隐藏/显示内容。

问题

在 TextField 组件 中，有一个输入触发了我的 vuex store 的突变。 Dependent Component 有一个 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 .