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

Question

我查看 了 几个 问题以找出我做错了什么。在我看来，一切都正确设置。

目标

基于COMPONENT Av-show的值，使用DEPENDENT COMPONENT更改隐藏/显示内容。

问题

在TextField Component内部，有一个输入会触发 my 上的突变vuex store。依赖组件有一个computed值来监听vuex store.

在输入我的TextField Component时，我可以使用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)
}

否则它不会是反应性的。

请参阅文档。