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

Question

这个问题已经有一段时间没有涉及了，但当我为文本区域值使用计算属性时，我遇到了一些令人困惑的问题。

我有一个文本区域，你可以在那里输入文本，输入时它会更新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开发工具中，我看到翻译文本的正确状态。然而，我的第二个纯用于显示翻译文本的文本区域永远不会更新

输出文本区域：

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

它的值绑定到一个名为getOutputText:的计算属性

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

我在这里做错了什么！欢迎提出任何建议。我认为这应该很好，因为我在vuex操作中以同步的方式使用commit(在then()块中)。

编辑：如果我也尝试使用v-model，我会得到相同的结果。vuex状态的初始输出文本在页面加载时呈现在那里。当我翻译时，我在Vue Dev Tools中正确地看到了更新，但文本区域中的文本从未重新呈现。

编辑#2：这是我的setOutputText突变：

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

Answer 1

查看了多行文本的vue文档后，应该将: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
}
}
}