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

Question

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

目标

基于 COMPONENT A 的值，使用 DEPENDENT COMPONENT 中的 v-show 更改 hide/display 内容。

问题

在 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。

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

Vuex not updating computed variable mapped using mapState

javascript

vue.js

vue-component

vuex