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

这个问题已经有一段时间没有被触及了，但在使用计算属性作为textarea值时，我遇到了一些困惑

我有一个文本区域，您可以在其中输入文本，并在输入时更新vuex中的输入文本：

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

在我的商店里，我有我的

翻译英语和俄语

动作：

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

mutation和翻译文本的有效负载，在我的vue开发工具中，我看到翻译文本的正确状态。但是，我的第二个文本区域纯粹用于显示翻译后的文本，永远不会更新

输出文本区域：

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

我做错了什么！任何建议都将不胜感激。我认为这应该没问题，因为我在vuex操作中以同步方式使用了

commit

（在then（）块中）

编辑：如果我也尝试使用

v-model

，我会得到相同的结果。vuex状态的初始输出文本在页面加载时呈现在那里。翻译时，我在Vue开发工具中正确地看到了更新，但文本区域中的文本从未重新呈现

编辑#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>

---

查看vue文档后，应将

：value=“getOutputText”

替换为

v-model=“getOutputText”

因为它是计算属性，所以要在

v-model

中使用它，需要将

get

和

set

添加到计算属性中

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

---

您是否可以包含“setOutputText”变体？您在Vue开发工具中看到了哪些更新？你能确认这个。$store.state.outputText是否在你的计算方法中检索到了正确的值吗？@NickDechiara谢谢你的回答，我已经用你要的代码片段更新了这个问题@Ryemos在我向lambda端点发送axios帖子后，我看到我在Vue开发工具中的状态用翻译后的文本进行了适当的更新。我将值提交到then（）块中的

setOutputText

。尝试将

：value=“getOutputText”

更改为

v-model=“getOutputText”

。因为它是计算属性，所以您应该添加

get

和

set

是否可以包含您的“setOutputText”变异？您在Vue开发工具中看到了哪些更新？你能确认这个。$store.state.outputText是否在你的计算方法中检索到了正确的值吗？@NickDechiara谢谢你的回答，我已经用你要的代码片段更新了这个问题@Ryemos在我向lambda端点发送axios帖子后，我看到我在Vue开发工具中的状态用翻译后的文本进行了适当的更新。我将值提交到then（）块中的

setOutputText

。尝试将

：value=“getOutputText”

更改为

v-model=“getOutputText”

。因为它是计算属性，所以您应该添加

get

和

set

谢谢您的反馈，我回家后会试试这个！这不起作用：（.我的脑子现在严重崩溃了，这是我以前做过的一项琐碎的任务，虽然不是在文本区域，但它不应该是重要的。无论我在做什么，状态在vue开发工具中正确更新，文本区域永远不会用正确的文本重新呈现！只是注意到有一个打字错误

：v-model

，而不是

v-model

。）关于这一点不必担心，我捕获了丢失的

：

。它仍然不起作用，非常奇怪。正如我提到的，状态得到更新，但即使这样也不会导致textarea使用来自状态的更新输出文本重新呈现：（啊，它终于起作用了，我真的不知道发生了什么变化，我觉得我快疯了。我删除了v模型，但按照你的建议保留了get/set的computed属性。我保留了

：value=“getOutputText”标签上的

，因为v-model一号不起作用。现在它终于重新呈现了文本。多么奇怪的事情啊，我以前从未遇到过这么小的麻烦，经常这样使用

：value

。感谢您在故障排除方面的帮助！感谢您的反馈，我回家后会试试这个！这不起作用:（.我的脑子现在严重崩溃了，这是我以前做过的一项琐碎的任务，虽然不是在文本区域，但它不应该是重要的。无论我在做什么，状态在vue开发工具中正确更新，文本区域永远不会用正确的文本重新呈现！只是注意到有一个打字错误

：v-model

，而不是

v-model

。）关于这一点不必担心，我捕获了丢失的

：

。它仍然不起作用，非常奇怪。正如我提到的，状态得到更新，但即使这样也不会导致textarea使用来自状态的更新输出文本重新呈现：（啊，它终于起作用了，我真的不知道发生了什么变化，我觉得我快疯了。我删除了v模型，但按照你的建议保留了get/set的computed属性。我保留了

：value=“getOutputText”标签上的

，因为v-model one不起作用。现在它终于重新呈现了文本。多么奇怪的事情啊，我以前从未遇到过这样的麻烦，经常这样使用

：value

。感谢您在故障排除方面的帮助！

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

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