Vuex 변환 업데이트 상태, 계산된 속성이 마크업에 업데이트를 반영하지 않음

Vuex 변환 업데이트 상태, 계산된 속성이 마크업에 업데이트를 반영하지 않음

이 문제는 한동안 해결되지 않았지만 텍스트 영역 값에 대해 계산된 속성을 사용할 때 혼란스러운 문제가 발생했습니다.

입력 텍스트를 제공하는 텍스트 영역이 있으며 입력 시 vuex의 입력 텍스트를 업데이트합니다.

<textarea
ref="inputText"
:value="getInputText"
@input="setInputText"
class="textarea"
placeholder="Your message goes in here"
></textarea>

버튼을 클릭해서 번역하면,handleInput방법.

handleInput() {
    this.$store.dispatch("translateEnglishToRussian");
},

내 가게에는 내 것이 있다.translateEnglishToRussian액션:

translateEnglishToRussian({ commit }) {
    const TRANSLATE_API = "https://XXXXXXXX.us-east-1.amazonaws.com/prod/YYYY/";
    const data = JSON.stringify({ english: this.state.inputText });

    this.$axios
    .$post(TRANSLATE_API, data)
    .then(data => {
        commit("setOutputText", data.translatedText);
        commit("setMP3Track", data.mp3Path);
    })
    .catch(err => {
        console.log(err);
    });
}

라고 하는 것을 알 수 있다.setOutputText변환(번역된 텍스트의 페이로드에 의한 변환), vue dev 툴에 번역된 텍스트의 올바른 상태가 표시됩니다.그러나 번역된 텍스트를 표시하기 위해 사용하는 두 번째 텍스트 영역은 업데이트되지 않습니다.

출력 텍스트 영역:

<textarea
disabled
ref="outputText"
:value="getOutputText"
class="textarea"
></textarea>

이 값은 다음과 같은 계산 속성에 바인딩됩니다.getOutputText:

getOutputText() {
    return this.$store.state.outputText;
}

내가 여기서 뭘 잘못하고 있는 거지?어떤 조언이라도 감사합니다.이 정도면 될 것 같아서commitvuex 액션을 동기식으로 실행합니다(then() 블록을 참조).

편집: 를 사용해도 같은 결과가 됩니다.v-model. vuex 상태에서의 초기 출력 텍스트는 페이지 로드 시 렌더링됩니다.번역하면 Vue Dev Tools에서 업데이트가 올바르게 표시되지만 텍스트 영역의 텍스트는 다시 렌더링되지 않습니다.

편집 #2: 여기 있습니다.setOutputText변환:

  setOutputText(state, payload) {
    console.log(`state - set output - ${payload}`);
    state.outputText = payload;
  },

vue docs for Multiline 텍스트를 확인한 후 대체해야 합니다.:value="getOutputText"와 함께v-model="getOutputText".

계산된 속성이기 때문에, 그것을 사용하는 것은v-model추가할 필요가 있다get그리고.set계산한 속성으로

<textarea
  disabled
  ref="outputText"
  v-model="getOutputText"
  class="textarea"
></textarea>

편집: @Stephen Tetreault 코멘트에 따라v-model잘 먹히지는 않았지만:value마지막에 문제를 해결했어요.

computed: {
  getOutputText: {
    // getter
    get: function () {
      return this.$store.state.outputText;
    },
    // setter
    set: function (newValue) {
      // there is no need to set anything here
    }
  }
}

언급URL : https://stackoverflow.com/questions/54136670/vuex-mutation-updates-state-computed-property-never-reflects-update-in-markup