Vuex가 mapState를 사용하여 매핑된 계산 변수를 업데이트하지 않음

Vuex가 mapState를 사용하여 매핑된 계산 변수를 업데이트하지 않음

제가 뭘 잘못하고 있는지 알아내기 위해 몇 가지 질문을 했습니다.모든 것이 올바르게 설정되어 있는 것 같습니다.

목표

COMPONT A의 값을 기반으로 콘텐츠 숨기기/표시 변경v-show종속 컴포넌트에 있습니다.

문제

TextField 컴포넌트 내부에는 변환이 트리거되는 입력이 있습니다.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 }}는 비어 있습니다.{}같은 장소로 돌아갈 때까지요그러나 트리거되는 계산된 값 리스너는 없습니다.

새로 설정하는 경우keyvuex 상태 내에서 다음을 사용해야 합니다.

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

그렇지 않으면 반응하지 않습니다.

메뉴얼을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/40827991/vuex-not-updating-computed-variable-mapped-using-mapstate