Vuex突变更新状态,计算属性从不反映标记中的更新

这个问题已经有一段时间没有被讨论过了,但是我在使用计算属性作为textArea值时,在我的末尾遇到了一些困惑。

我有一个文本区域,您在其中提供输入文本,输入时它更新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;
}

我在这里做错什么了!感谢您的任何建议。我想这个应该没问题,因为我在用 commit 以同步方式(在then()块中)执行Vuex操作。

编辑:如果我也尝试使用 v-model . Vuex状态的初始输出文本在页面加载时呈现在那里。当我翻译时,我在VueDev工具中正确地看到了更新,但是文本区域中的文本永远不会重新呈现。

编辑2:这是我的 设置输出文本 突变:

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