Question

我looked at several questions了解我的情况做错了。一切都在我看来正确设置。

目标

根据 COMPONENT A 的值，使用相关组件中的v-show更改隐藏/显示内容。

问题

在 TextField Component 中，有一个输入会触发vuex store上的变异。 从属组件的值为computed，可监听vuex store上的更改。

在我的 TextField组件中输入内容时，我可以使用Vue.js extension验证突变是否按预期触发。

但是，页面上没有任何变化。

COMPONENT 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更新映射的计算变量

1 个答案: