Vue.js 使用vuex形成单向绑定

在我的应用程序中，我使用vuex的双向绑定：

  messageContent: {
    get () {
      return store.getters.messageContent
    },
    set (value) {
      store.commit('updateContent', value)
    }
  },

<b-form-textarea id="content" v-model="messageContent" :rows="3"></b-form-textarea>

<b-button size="sm" variant="primary" value="Cancel" aria-label="Cancel" @click.prevent='onCancel'>
      <i class="fa fa-times" aria-hidden="true"></i> Cancel
   </b-button>

如何回滚

---

我认为解决方案是一种方法，但我不确定如何使用vuex实现它。

我认为您需要在本例中使用类似的方法，您需要清楚地区分什么是旧内容-旧状态以及什么是新内容-新状态。这是一个简单但有效的例子

var store=新的Vuex.store({
声明：{
savedContent:“以前的内容”
},
突变：{
保存内容（状态、值）{
state.savedContent=值
}
}
})
新Vue({
el:“#应用程序”，
商店，
数据：{
新内容：store.state.savedContent
},
方法：{
保存（）{
this.$store.commit（'saveContent'，this.newContent）
},
取消（）{
this.newContent=this.$store.state.savedContent
}
}
})

拯救
取消

您可以添加html部分，并使用binded messageContent和cancel edit按钮输入内容吗？我已经添加了itHm。指令

v-model

在这种情况下不太合适。为了能够创建“撤消”，您需要在键入/编辑文本区域之前明确区分旧值和新值-要“保存”的值。那么，这个“取消编辑”按钮是什么意思？在文本区域获得焦点之前返回值？所谓“取消”，我的意思是将视图返回到上一个状态或只读视图。您在哪里保留上一个状态？很高兴提供帮助：）在

savedContent

typeof！==对象

 methods: {
      onCancel () {
        this.isEdit = !this.isEdit
      }
 }