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

【问题标题】：Vuex not updating computed variable mapped using mapStateVuex 不更新使用 mapState 映射的计算变量
【发布时间】：2017-04-11 05:06:02
【问题描述】：

我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 }} 仍然为空：{} 直到我将路线导航回同一位置。但是没有触发计算值监听器。

【问题讨论】：

标签： javascript vue.js vue-component vuex

【解决方案1】：

如果你在 vuex 状态下设置一个新的key 那么你需要使用：

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

否则它不会反应。

见documentation。

【讨论】：

太棒了！谢谢@GuyC。我正在为您的答案添加指向有关此文档的链接。
如果我能给你的答案投票 10 次，我会做到的！谢谢。
男人！！！！如果我有这个选项，100 个赞。你把我从深陷的陷阱中救了出来
我正在设置一个基本字符串值，但 mapState 没有更新，其中 mapGetters 按预期工作。奇怪吗？