Хобрук: Ваш путь к мастерству в программировании

Сформировать одностороннюю привязку с 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>

Поскольку мутация реквизита уже произошла, если я нажму кнопку отмены редактирования:

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

как мне откатиться?

Я решил, что один из способов - это решение, но я не уверен, как реализовать его с помощью vuex.

vue.js vuex vuejs2
21.11.2017

  • Можете ли вы добавить часть html с вводом с привязанным messageContent и кнопкой отмены редактирования? 21.11.2017
  • я добавил это 21.11.2017
  • Хм. Директива v-model не очень подходит в этой ситуации. Чтобы иметь возможность создать отмену, вам нужно четко различать старое значение — перед вводом/редактированием текстовой области и новое значение — значение для сохранения. Итак, что вы имеете в виду с этой кнопкой отмены редактирования? Вернуться к значению до того, как текстовая область получит фокус? 21.11.2017
  • под отменой я имею в виду возврат представления в предыдущее состояние или представление только для чтения. 21.11.2017
  • И где вы держите это предыдущее состояние? 21.11.2017
  • Это то, что я пытаюсь выяснить. Как реализовать откат к предыдущему состоянию. 21.11.2017
  • Смотрите пример в ответе, хотите ли вы этого. 21.11.2017

Ответы:


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>

21.11.2017
  • Рад помочь :) 21.11.2017
  • Работает до savedContent typeof !== Object 26.02.2019
    • Новые материалы
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..
    Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
    LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..
    Структуры данных в C ++ - Часть 1
    Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..
    Как я опубликовал свое первое приложение в App Store в 13 лет
    Как все началось Все началось три года назад летом после моего четвертого класса в начальной школе. Для меня, четвертого класса, лето кажется бесконечным, пока оно не закончится, и мой отец..