![](/img/trans.png)
[英]Vuex - Computed property based on a modules state does not update on dispatch?
[英]Vuex mutation updates state, computed property never reflects update in markup
一段时间未解决此问题,但在将计算属性用于textarea值时,我遇到了令人困惑的事情。
我有一个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);
});
}
我在vue开发工具中看到带有翻译文本有效负载的setOutputText
突变,可以看到翻译文本的正确状态。 但是,我仅用于显示翻译文本的第二个文本区域永远不会更新!
输出textarea:
<textarea
disabled
ref="outputText"
:value="getOutputText"
class="textarea"
></textarea>
它的值绑定到名为getOutputText
的计算属性:
getOutputText() {
return this.$store.state.outputText;
}
我在这里做错了什么! 任何建议表示赞赏。 我认为应该没问题,因为我在vuex动作中以同步方式(在then()块内)使用了commit
。
编辑:如果我也尝试使用v-model
我会有相同的结果。 来自vuex状态的初始输出文本在页面加载时在那里呈现。 翻译时,我会在Vue Dev Tools中正确看到更新,但是文本区域中的文本永远不会重新呈现。
编辑2:这是我的setOutputText
突变:
setOutputText(state, payload) {
console.log(`state - set output - ${payload}`);
state.outputText = payload;
},
在查看多行文本的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
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.