Form One 与 vuex 绑定的方式

Question

在我的应用程序中，我使用 2 种方式与 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>

由于道具的变异已经发生，如果我点击取消编辑按钮：

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

如何回滚？

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

Answer 1

我想你需要像这个例子一样，你需要清楚地区分什么是旧内容 - 旧状态，什么是新内容 - 新状态。一些东西，因为这是简化但有效的例子。

var store = new Vuex.Store({
  state: {
    savedContent: 'Previous content'
  },
  mutations: {
    saveContent (state, value) {
      state.savedContent = value
    }
  }
})

new Vue ({
  el: '#app',
  store,
  data: {
    newContent: store.state.savedContent
  },
  methods: {
    save () {
      this.$store.commit('saveContent', this.newContent)
    },
    cancel () {
      this.newContent = this.$store.state.savedContent
    }
  }
})

<div id="app">
  <textarea v-model="newContent"></textarea><br>
  <button @click="save">save</button>
  <button @click="cancel">cancel</button>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

Form One 与 vuex 绑定的方式

Form One way binding with vuex

vue.js

vuejs2

vuex