vuex를 사용하여 단방향 바인딩을 구성합니다.

vuex를 사용하여 단방향 바인딩을 구성합니다.

애플리케이션에서 vuex와 2방향 바인딩을 사용합니다.

  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를 사용하여 구현하는 방법을 잘 모르겠습니다.

이 예와 같은 것이 필요하다고 생각합니다. 오래된 내용이 무엇인지 - 오래된 내용이 무엇인지 - 새로운 내용이 무엇인지 - 새로운 내용이 무엇인지 - 명확하게 구분해야 합니다.이것은 단순하지만 효과적인 예입니다.

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>

언급URL : https://stackoverflow.com/questions/47414305/form-one-way-binding-with-vuex